{"id":15187,"library":"react-highlight-words","title":"React Highlight Words","description":"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.","status":"active","version":"0.21.0","language":"javascript","source_language":"en","source_url":"https://github.com/bvaughn/react-highlight-words","tags":["javascript","react","reactjs","react-component","highlighter","highlight","text","words","matches"],"install":[{"cmd":"npm install react-highlight-words","lang":"bash","label":"npm"},{"cmd":"yarn add react-highlight-words","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-highlight-words","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer 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.","package":"react","optional":false}],"imports":[{"note":"Highlighter is the default export of the package. Do not use named import syntax or CommonJS `require()` as a function.","wrong":"import { Highlighter } from 'react-highlight-words';\nconst Highlighter = require('react-highlight-words');","symbol":"Highlighter","correct":"import Highlighter from 'react-highlight-words';"}],"quickstart":{"code":"import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport Highlighter from 'react-highlight-words';\n\nconst root = createRoot(document.getElementById('root'));\nroot.render(\n  <Highlighter\n    highlightClassName=\"YourHighlightClass\"\n    searchWords={['dog', 'cat', 'playing']}\n    autoEscape={true}\n    textToHighlight=\"The dog is chasing the cat. Or perhaps they're just playing?\"\n  />\n);","lang":"typescript","description":"Demonstrates basic usage of the Highlighter component, highlighting multiple search words within a given text and applying a custom class to matches."},"warnings":[{"fix":"Always set `autoEscape={true}` if search words are not strictly controlled or contain potential RegExp special characters.","message":"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.","severity":"gotcha","affected_versions":"<=0.21.0"},{"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.","message":"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.","severity":"breaking","affected_versions":"<0.18.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Use the correct default import syntax: `import Highlighter from 'react-highlight-words';`","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.","error":"TypeError: Highlighter is not a function"},{"fix":"Set the `autoEscape` prop to `true` on the `Highlighter` component: `<Highlighter autoEscape={true} ... />`","cause":"A `searchWord` contains special regular expression characters (e.g., `*`, `+`, `?`, `(`, `)`, `[`, `]`, `.`) and `autoEscape` is not set to `true`.","error":"Error: Invalid regular expression: /.../: Nothing to repeat at offset X"},{"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`.","cause":"The package is not installed or the import path is incorrect.","error":"Module not found: Can't resolve 'react-highlight-words'"}],"ecosystem":"npm"}