ReactJS component that help you highlight ranges of text and give you callbacks to detect user selection.
ReactJS component that help you highlight ranges of text and give you callbacks to detect user text selection.
npm install highlightable
<Highlightable ranges={ranges}
enabled={true}
onTextHighlighted={onTextHighlightedCallback}
id={uniqueId}
onMouseOverHighlightedWord={onMouseOverHighlightedWordCallback}
highlightStyle={{
backgroundColor: '#ffcc80'
}}
text={'text'}
/>
ranges -> array: of Range objects (see Range object below).
text -> string: the all text that the user can highlight.
enabled -> bool: The user can't highlight text if false.
onMouseOverHighlightedWord -> func: Callback function when the user mouse is over an highlighted text.
(range) => {}
onTextHighlighted -> func: Callback function when the user highlight new text.
(range) => {}
highlightStyle -> obj: Style of the text when the text is highlighted. or func:
(range, charIndex) => {return style}
style -> obj: The style of the main div container
rangeRenderer -> func: Use this function to customise the render of the highlighted text.
(currentRenderedNodes, currentRenderedRange, currentRenderedIndex, onMouseOverHighlightedWord) => {return node}
nodeRenderer -> func: Use this function to customise the render of the nodes.
(charIndex, range, text, url, isEmoji) => {return node}
The range object attributes:
npm run build
- produces production versionnpm run dev
- produces development versionnpm test
- run the tests