Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-highlight-words

bvaughn1.7mMIT0.21.0TypeScript support: definitely-typed

React component to highlight words within a larger body of text

react, reactjs, react-component, highlighter, highlight, text, words, matches, substring, occurrences, search

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.

Try this example in Code Sandbox.

import React from "react";
import { createRoot } from "react-dom/client";
import Highlighter from "react-highlight-words";

const root = createRoot(document.getElementById("root"));
root.render(
  <Highlighter
    highlightClassName="YourHighlightClass"
    searchWords={["and", "or", "the"]}
    autoEscape={true}
    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
activeClassName String | The class name to be applied to an active match. Use along with activeIndex
activeIndex Number | 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 or Object | CSS class name applied to highlighted text or object mapping search term matches to class names.
highlightStyle Object | Inline styles applied to highlighted text
highlightTag Node or String | Type of tag to wrap around highlighted matches. Defaults to mark but can also be a React component (class or functional)
sanitize Function | Process each search word and text to highlight before comparing (eg remove accents); signature (text: string): string
searchWords Array<String | RegExp> ✓ Array of search words. String search terms are automatically cast to RegExps unless autoEscape is true.
textToHighlight String ✓ Text to highlight matches in
unhighlightClassName String | CSS class name applied to unhighlighted text
unhighlightStyle Object | Inline styles applied to unhighlighted text
unhighlightTag Node or String | Type of tag applied to unhighlighted parts. Defaults to span but can also be a React component (class or functional)
* any | Any other props (such as title or data-*) are applied to the outer/wrapper <span>

Custom highlight tag

By default, this component uses an HTML Mark Text element (<mark>) to wrap matched text, but you can inject a custom tag using the highlightTag property. This tag should be a React component that accepts the following properties:

Property Type Description
children String Text to be highlighted
highlightIndex Number Index of matched text

For example:

const Highlight = ({ children, highlightIndex }) => (
  <strong className="highlighted-text">{children}</strong>
);

Installation

yarn add react-highlight-words
npm i react-highlight-words

License

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