react-highlight-words

react-highlight-words renders a body of text with an array of search words wrapped in a highlight element, defaulting to the semantic <mark> tag but swappable for any custom React component. It’s built as a thin, focused wrapper around highlight-words-core, the same author’s underlying matching logic, so string search terms are automatically converted to case-insensitive regexes (with optional auto-escaping) without requiring the consumer to hand-write matching code.

The component exposes granular styling and behavior props — separate class names and inline styles for highlighted vs. unhighlighted text, an activeIndex/activeClassName pair for marking one match as currently selected, and a sanitize hook for normalizing text (e.g. stripping accents) before comparison — making it a common building block for search-result snippets, autocomplete dropdowns, and in-page find UIs.

What You Get

• A <Highlighter searchWords={[...]} textToHighlight={...} /> component that wraps all matches in a <mark> (or custom tag)
• Automatic conversion of string search terms into regexes, with autoEscape to safely handle special characters
• Separate styling hooks for highlighted vs. unhighlighted text (highlightClassName/highlightStyle, unhighlightClassName/unhighlightStyle)
• An activeIndex/activeClassName/activeStyle trio for marking one specific match as the currently selected result
• A sanitize prop for normalizing text before comparison (e.g. accent stripping) without altering the displayed text
• Support for custom highlightTag/unhighlightTag React components instead of the default mark/span elements

Common Use Cases

• Highlighting the matched query term(s) inside search result snippets in a React app
• Building autocomplete or typeahead dropdowns that show which part of each suggestion matched the user’s input
• Implementing an in-page “find in text” feature with a currently-active match indicator
• Highlighting multiple distinct terms (e.g. tags or keywords) within displayed content simultaneously
• Normalizing accented or differently-cased text before matching, via the sanitize prop, while preserving original display text

Under The Hood

Architecture: The published component is a thin ~120-line wrapper (src/Highlighter.js) around chunk-finding logic delegated to the sibling highlight-words-core package (also maintained by the author), which computes match/no-match text chunks; Highlighter.js then maps those chunks to React elements, applying the configured highlight/unhighlight tags, classes, and styles, with activeIndex handled as a simple chunk-index comparison during the render pass. Tech Stack: Plain JavaScript (no TypeScript) built with Webpack across several purpose-specific configs (dist.cjs, dist.umd, website, dev) to produce both a CommonJS distribution and a UMD bundle, tested via Karma rather than Jest, and linted with standard (zero-config ESLint preset) run as a prebuild step. Code Quality: The core logic is covered by a single, fairly thorough Highlighter.test.js exercising the main prop combinations, plus a documented CodeSandbox example for custom findChunks usage; the project has had minimal commit activity since its early releases, so its small, stable surface area has changed little in practice. API Design: The prop table is exhaustive and self-documenting in the README — every visual and behavioral variation (active match, custom tags, sanitize hook) is exposed as a discrete, independently optional prop, which keeps the common case (searchWords + textToHighlight) to two lines while still supporting advanced customization.