react-highlight-words

react-highlight-words renders text with specified substrings highlighted, useful for search results, find-in-page UIs, and autocomplete menus. You pass a string (or node tree) and an array of search terms, and the component splits content into matched and unmatched chunks with minimal overhead. It supports case-sensitive or insensitive matching and optional auto-escaping so user-entered queries won’t be treated as regex. For advanced scenarios, you can provide a custom findChunks function to control tokenization (e.g., word boundaries or diacritics-aware behavior). The highlight output is easy to restyle via a custom tag (like mark) or inline styles, keeping the visual layer decoupled from the matching logic. Because it’s small and framework-idiomatic, it drops into tables, lists, virtualized scroll areas, and complex UIs without forcing layout changes.