Highlightable NPM

Highlight component for ReactJS

ReactJS component that help you highlight ranges of text and give you callbacks to detect user text selection.

Installation

  npm install highlightable

Features

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

Getting started

<Highlightable ranges={ranges}
               enabled={true}
               onTextHighlighted={onTextHighlightedCallback}
               id={uniqueId}
               onMouseOverHighlightedWord={onMouseOverHighlightedWordCallback}
               highlightStyle={{
                 backgroundColor: '#ffcc80'
               }}
               text={'text'}
/>

Props:

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}