react-highlight-words

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.

README

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.