What is react-highlight-words?
The react-highlight-words package is a React component used to highlight words within a larger body of text. It is useful for search results, text highlighting, and other applications where specific words or phrases need to be visually emphasized.
What are react-highlight-words's main functionalities?
Basic Highlighting
This feature allows you to highlight specific words within a text. The `searchWords` array contains the words to be highlighted, and the `textToHighlight` is the text where the words will be highlighted.
import React from 'react';
import Highlighter from 'react-highlight-words';
const text = 'This is a sample text to demonstrate highlighting.';
const searchWords = ['sample', 'highlighting'];
const App = () => (
<Highlighter
highlightClassName="YourHighlightClass"
searchWords={searchWords}
autoEscape={true}
textToHighlight={text}
/>
);
export default App;
Custom Highlighting Styles
This feature allows you to apply custom styles to the highlighted words. The `highlightStyle` prop is used to define the CSS styles for the highlighted text.
import React from 'react';
import Highlighter from 'react-highlight-words';
const text = 'This is a sample text to demonstrate custom highlighting.';
const searchWords = ['sample', 'custom'];
const App = () => (
<Highlighter
highlightStyle={{ backgroundColor: 'yellow', fontWeight: 'bold' }}
searchWords={searchWords}
autoEscape={true}
textToHighlight={text}
/>
);
export default App;
Case Insensitive Highlighting
This feature allows you to perform case insensitive highlighting. By setting the `caseSensitive` prop to `false`, the component will highlight words regardless of their case.
import React from 'react';
import Highlighter from 'react-highlight-words';
const text = 'This is a Sample text to demonstrate case insensitive highlighting.';
const searchWords = ['sample', 'highlighting'];
const App = () => (
<Highlighter
highlightClassName="YourHighlightClass"
searchWords={searchWords}
autoEscape={true}
caseSensitive={false}
textToHighlight={text}
/>
);
export default App;
Other packages similar to react-highlight-words
react-text-highlighter
The react-text-highlighter package provides similar functionality for highlighting text within a React component. It offers customizable styles and supports case insensitive highlighting. Compared to react-highlight-words, it has a simpler API but fewer customization options.
react-string-replace
The react-string-replace package allows you to replace parts of a string with React components. It can be used to highlight text by replacing specific words with styled components. While it is more flexible in terms of what can be replaced, it requires more manual setup compared to react-highlight-words.
react-markdown
The react-markdown package is used to render Markdown content in React. It supports custom renderers, which can be used to highlight specific words or phrases. Although it is primarily designed for Markdown rendering, it can be adapted for text highlighting with custom renderers.
React component to highlight words within a larger body of text.
Check out a demo here.
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.
import React from "react";
import { createRoot } from "react-dom/client";
import Highlighter from "react-highlight-words";
const root = createRoot(document.getElementById("root"));
root.render(
<Highlighter
highlightClassName="YourHighlightClass"
searchWords={["and", "or", "the"]}
autoEscape={true}
textToHighlight="The dog is chasing the cat. Or perhaps they're just playing?"
/>
);
And the Highlighter
will mark all occurrences of search terms within the text:
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 <span> |
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 for signature. Have a look at the custom findChunks example 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 element (class or functional) |
sanitize | Function | | Process each search word and text to highlight before comparing (eg remove accents); signature (text: string): string |
searchWords | Array<String | RegExp> | ✓ | 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 element (class or functional) |
* | any | | Any other props (such as title or data-* ) are applied to the outer/wrapper <span> |
Custom highlight tag
By default this component uses an HTML Mark Text element (<mark>
) 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:
const Highlight = ({ children, highlightIndex }) => (
<strong className="highlighted-text">{children}</strong>
);
Installation
yarn add react-highlight-words
npm i --save react-highlight-words
License
MIT License - fork, modify and use however you want.