Download
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.
Features
- Simple API: input text plus searchWords array yields highlighted chunks
- Case-sensitive or insensitive matching with optional auto-escape
- Custom findChunks for advanced tokenization strategies
- Configurable highlight wrapper element and styles
- Works with plain strings or nested React nodes
- Lightweight and composable for search results and autocompletes
Project Samples
