# react-highlight-words > React component to highlight words within a larger body of text Latest version **0.21.0** (published 2025-01-12) · MIT license · 0 weekly downloads ## Install ```sh npm install react-highlight-words pnpm add react-highlight-words yarn add react-highlight-words bun add react-highlight-words ``` ## Health **Score 33/100 (F)** — status: maintenance-mode. Positive: has types package; no vulnerabilities; high quality score. Warnings: low downloads; no esm support; pre 1.0. Negative: stale; low maintenance score. ## Facts | | | |---|---| | Version | 0.21.0 | | Published | 2025-01-12 | | First published | 2015-12-16 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | separate (@types/react-highlight-words) | | Module format | CommonJS | | Dependencies | 2 | | Unpacked size | 2.3 MB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 2303 | | Author | Brian Vaughn | | Maintainers | brianvaughn, clauderic, sergei-startsev | | Keywords | react, reactjs, react-component, highlighter, highlight, text, words, matches, substring, occurrences, search | ## Links - npm: https://www.npmjs.com/package/react-highlight-words - Repository: https://github.com/bvaughn/react-highlight-words - Homepage: https://github.com/bvaughn/react-highlight-words#readme - Issues: https://github.com/bvaughn/react-highlight-words/issues - npm.io page: https://npm.io/package/react-highlight-words ## Dependencies (2) - [memoize-one](https://npm.io/package/memoize-one.md) ^4.0.0 - [highlight-words-core](https://npm.io/package/highlight-words-core.md) ^1.2.0 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 0.21.0 (latest) — 2025-01-12 - 0.20.0 — 2023-01-22 - 0.19.0 — 2023-01-22 - 0.18.0 — 2022-04-07 - 0.17.0 — 2021-01-20 - 0.16.0 — 2019-01-11 - 0.15.1 — 2019-01-02 - 0.15.0 — 2018-12-29 - 0.14.0 — 2018-08-23 - 0.13.0 — 2018-08-22 - 0.12.0 — 2018-07-29 - 0.11.0 — 2018-02-19 - 0.10.0 — 2017-10-15 - 0.9.0 — 2017-09-24 - 0.8.1 — 2017-08-07 - … 17 more at https://npm.io/package/react-highlight-words/versions ## README React component to highlight words within a larger body of text. Check out a demo [here](https://bvaughn.github.io/react-highlight-words). ## Usage To use it, just provide it with an array of search terms and a body of text to highlight. [Try this example in Code Sandbox.](https://codesandbox.io/s/5v8yqoxv7k) ```jsx import React from "react"; import { createRoot } from "react-dom/client"; import Highlighter from "react-highlight-words"; const root = createRoot(document.getElementById("root")); root.render( ); ``` And the `Highlighter` will mark all occurrences of search terms within the text: screen shot 2015-12-19 at 8 23 43 am ## Props | Property | Type | Required? | Description | |------------------------|-----------------------------|:---------:|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | `activeClassName` | String | | The class name to be applied to an active match. Use along with `activeIndex` | | `activeIndex` | Number | | Specify the match index that should be actively highlighted. Use along with `activeClassName` | | `activeStyle` | Object | | The inline style to be applied to an active match. Use along with `activeIndex` | | `autoEscape` | Boolean | | Escape characters in `searchWords` which are meaningful in regular expressions | | `className` | String | | CSS class name applied to the outer/wrapper `` | | `caseSensitive` | Boolean | | Search should be case sensitive; defaults to `false` | | `findChunks` | Function | | Use a custom function to search for matching chunks. This makes it possible to use arbitrary logic when looking for matches. See the default `findChunks` function in [highlight-words-core](https://github.com/bvaughn/highlight-words-core) for signature. Have a look at the [custom findChunks example](https://codesandbox.io/s/k20x3ox31o) on how to use it. | | `highlightClassName` | String or Object | | CSS class name applied to highlighted text or object mapping search term matches to class names. | | `highlightStyle` | Object | | Inline styles applied to highlighted text | | `highlightTag` | Node or String | | Type of tag to wrap around highlighted matches. Defaults to `mark` but can also be a React component (class or functional) | | `sanitize` | Function | | Process each search word and text to highlight before comparing (eg remove accents); signature `(text: string): string` | | `searchWords` | Array | ✓ | Array of search words. String search terms are automatically cast to RegExps unless `autoEscape` is true. | | `textToHighlight` | String | ✓ | Text to highlight matches in | | `unhighlightClassName` | String | | CSS class name applied to unhighlighted text | | `unhighlightStyle` | Object | | Inline styles applied to unhighlighted text | | `unhighlightTag` | Node or String | | Type of tag applied to unhighlighted parts. Defaults to `span` but can also be a React component (class or functional) | | * | any | | Any other props (such as `title` or `data-*`) are applied to the outer/wrapper `` | ## Custom highlight tag By default, this component uses an HTML Mark Text element (``) to wrap matched text, but you can inject a custom tag using the `highlightTag` property. This tag should be a React component that accepts the following properties: | Property | Type | Description | |------------------|--------|------------------------| | `children` | String | Text to be highlighted | | `highlightIndex` | Number | Index of matched text | For example: ```js const Highlight = ({ children, highlightIndex }) => ( {children} ); ``` ## Installation ``` yarn add react-highlight-words ``` ``` npm i react-highlight-words ``` ## License MIT License - fork, modify and use however you want. --- _Source: https://npm.io/package/react-highlight-words · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._