React Highlight Words

0.21.0 · active · verified Tue Apr 21

react-highlight-words is a React component designed to highlight specific words or phrases within a larger body of text. It is currently stable at version v0.21.0, which includes support for React 19. The package primarily sees updates for compatibility with newer React versions and minor feature additions, indicating a consistent but not overly frequent release cadence. Key differentiators include its straightforward API, support for regular expression `searchWords`, automatic escaping of special characters via `autoEscape`, and the ability to apply specific styling or classes to an 'active' match using `activeIndex` and `activeClassName`, making it suitable for search result navigation or interactive text features. It provides a robust solution for visually emphasizing text segments based on user-defined criteria.

Common errors

```
TypeError: Highlighter is not a function
```
cause Attempting to use `Highlighter` as a named import or via CommonJS `require()` as a function call, but it's exported as a default module.

fix Use the correct default import syntax: `import Highlighter from 'react-highlight-words';`
```
Error: Invalid regular expression: /.../: Nothing to repeat at offset X
```
cause A `searchWord` contains special regular expression characters (e.g., `*`, `+`, `?`, `(`, `)`, `[`, `]`, `.`) and `autoEscape` is not set to `true`.

fix Set the `autoEscape` prop to `true` on the `Highlighter` component: `<Highlighter autoEscape={true} ... />`
```
Module not found: Can't resolve 'react-highlight-words'
```
cause The package is not installed or the import path is incorrect.

fix Install the package using `npm install react-highlight-words` or `yarn add react-highlight-words`. Verify the import path is exactly `react-highlight-words`.

Warnings

gotcha The `autoEscape` prop, which escapes characters in `searchWords` that are meaningful in regular expressions, defaults to `false`. If you are highlighting user-provided input, it is strongly recommended to set `autoEscape={true}` to prevent potential RegExp errors or unexpected behavior due to special characters like '.', '*', '?', '+', etc. This was addressed in the demo website for v0.21.0, but the default remains `false` in the library.
Fix: Always set `autoEscape={true}` if search words are not strictly controlled or contain potential RegExp special characters.
breaking Older versions of `react-highlight-words` may not be compatible with newer versions of React. React 18 support was introduced in v0.18.0, and React 19 support in v0.21.0. Using an older package version with a newer React version can lead to runtime errors or unexpected behavior.
Fix: Ensure your `react-highlight-words` version is compatible with your React version. Upgrade to v0.18.0 or higher for React 18, and v0.21.0 or higher for React 19.

Install

npm install react-highlight-words npm
yarn add react-highlight-words yarn
pnpm add react-highlight-words pnpm

Imports

Highlighter

wrong:

import { Highlighter } from 'react-highlight-words';
const Highlighter = require('react-highlight-words');

correct:

import Highlighter from 'react-highlight-words';

Highlighter is the default export of the package. Do not use named import syntax or CommonJS `require()` as a function.

Quickstart

Demonstrates basic usage of the Highlighter component, highlighting multiple search words within a given text and applying a custom class to matches.

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={['dog', 'cat', 'playing']}
    autoEscape={true}
    textToHighlight="The dog is chasing the cat. Or perhaps they're just playing?"
  />
);

view raw JSON →