Package Exports

highlightable
highlightable/lib/Highlightable.min.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (highlightable) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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}

Range object:

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)

Development

npm run build - produces production version
npm run dev - produces development version
npm test - run the tests