Skip to content

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

License

Notifications You must be signed in to change notification settings

ydeshayes/react-highlight

Repository files navigation

Build Status

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