Registry / web-framework / react-highlight-words

react-highlight-words

library0.21.0jsnpmunverified

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.

web-framework serialization

npm install react-highlight-words

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-HIGHLIGHT-WO

react-highlight-words

web-frameworkjavascriptv0.21.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Highlighter

✓ import Highlighter from 'react-highlight-words';

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

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

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?" /> );

Debug

Known issues

gotchaThe `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.

affects: <=0.21.0

breakingOlder 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.

affects: <0.18.0

Errors

Common errors & fixes

TypeError: Highlighter is not a function

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

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'

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`.

Upgrade

Version history

0.21.0latest on npm

Audit

Dependencies

reactrequiredPeer dependency for rendering React components; requires ^0.14.0 || ^15.0.0 || ^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0 || ^19.0.0-0.

Agent activity

11 hits · last 30 days

node

Resources

githubhttps://github.com/bvaughn/react-highlight-words ↗

packagehttps://www.npmjs.com/package/react-highlight-words ↗