Component that help highlighting text
npm install highlightable
ReactJS component that help you highlight ranges of text and give you callbacks to detect user text selection.
```
npm install highlightable
* Pass ranges and the component will highlight the text for you
* Callback function that give you the start and end of the user highlited text
* Customisable renderRange function that allow you to add tooltip on the top of user selection for exemple
* Convert url string into link
`jsx`
onTextHighlighted={onTextHighlightedCallback}
id={uniqueId}
onMouseOverHighlightedWord={onMouseOverHighlightedWordCallback}
highlightStyle={{
backgroundColor: '#ffcc80'
}}
text={'text'}
/>$3
* 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:
* start -> int: the index of the character where the range start.
* end -> int: the index of the character where the range stop.
* text -> string: the highlighted text.
* data -> object: extra data (the props of the highlight component)
* npm run build - produces production versionnpm run dev
* - produces development versionnpm test` - run the tests
*