react-highlight-words

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

View demo Download Source

Usage

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

Try this example in Code Sandbox.

import React from "react";
import ReactDOM from "react-dom";
import Highlighter from "react-highlight-words";

ReactDOM.render(
  <Highlighter
    highlightClassName="YourHighlightClass"
    searchWords={["and", "or", "the"]}
    autoEscape={true}
    textToHighlight="The dog is chasing the cat. Or perhaps they're just playing?"
  />,
  document.getElementById("root")
);

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
activeClassName String The class name to be applied to an active match. Use along with activeIndex
activeIndex String Specify the match index that should be actively highlighted. Use along with activeClassName
activeStyle Object The inline style to be applied to an active match. Use along with activeIndex
autoEscape Boolean Escape characters in searchWords which are meaningful in regular expressions
className String CSS class name applied to the outer/wrapper <span>
caseSensitive Boolean Search should be case sensitive; defaults to false
findChunks Function Use a custom function to search for matching chunks. This makes it possible to use arbitrary logic when looking for matches. See the default findChunks function in highlight-words-core for signature. Have a look at the custom findChunks example on how to use it.
highlightClassName String CSS class name applied to highlighted text
highlightStyle Object Inline styles applied to highlighted text
highlightTag Node Type of tag to wrap around highlighted matches; defaults to mark but can also be a React element (class or functional)
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. The search terms are treated as RegExps unless autoEscape is set.
textToHighlight String ✓ Text to highlight matches in
unhighlightClassName String CSS class name applied to unhighlighted text
unhighlightStyle Object Inline styles applied to unhighlighted text

Installation

npm i --save react-highlight-words

GitHub