JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 664183
  • Score
    100M100P100Q180471F
  • License MIT

React component to highlight words within a larger body of text

Package Exports

  • react-highlight-words

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 (react-highlight-words) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React component to highlight words within a larger body of text.

Check out a demo here.

Usage

To use it, just provide it with an array of search terms and a body of text to highlight:

<Highlighter
  highlightClassName='YourHighlightClass'
  searchWords={['and', 'or', 'the']}
  textToHighlight="The dog is chasing the cat. Or perhaps they're just playing?"
/>

And the Highlighter will mark all occurrences of search terms within the text:

screen shot 2015-12-19 at 8 23 43 am

Props

Property Type Required? Description
autoEscape Boolean Escape characters which are meaningful in regular expressions
highlightClassName String CSS class name applied to highlighted text
highlightStyle Object Inline styles applied to highlighted text
sanitize Function Process each search word and text to highlight before comparing (eg remove accents); signature (text: string): string
searchWords Array Array of search words
textToHighlight String Text to highlight matches in

Installation

npm i --save react-highlight-words

License

MIT License - fork, modify and use however you want.