DOCSEARCHbyAlgolia
Submit Docs

react-highlight-words

repository·master·Indexed 25 days ago

https://github.com/bvaughn/react-highlight-words

A React component for highlighting specific words or phrases within a body of text, commonly used for search result displays. Version 0.21.0 provides the Highlighter component, which supports custom highlight tags, case sensitivity controls, and styling via class names or inline styles.

Tokens
972
Snippets
2
Records
5
Agent score
31%

What's inside react-highlight-words

  3. Basic usage of Highlighter

    master

    To use the Highlighter component, provide it with searchWords (an array of strings or RegExps) and textToHighlight (the body of text). You can also provide a highlightClassName to style the matches.

    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?"
  />
);

  4. Highlighter Props Reference

    master

    The Highlighter component accepts the following props:

    PropertyTypeRequired?Description
    activeClassNameStringThe class name to be applied to an active match. Use along with activeIndex
    activeIndexNumberSpecify the match index that should be actively highlighted. Use along with activeClassName
    activeStyleObjectThe inline style to be applied to an active match. Use along with activeIndex
    autoEscapeBooleanEscape characters in searchWords which are meaningful in regular expressions
    classNameStringCSS class name applied to the outer/wrapper <span>
    caseSensitiveBooleanSearch should be case sensitive; defaults to false
    findChunksFunctionUse a custom function to search for matching chunks. See the default findChunks function in highlight-words-core for signature
    highlightClassNameString or ObjectCSS class name applied to highlighted text or object mapping search term matches to class names
    highlightStyleObjectInline styles applied to highlighted text
    highlightTagNode or StringType of tag to wrap around highlighted matches. Defaults to mark but can also be a React component
    sanitizeFunctionProcess each search word and text to highlight before comparing (eg remove accents); signature (text: string): string
    searchWordsArray<StringRegExp>✓
    textToHighlightString✓Text to highlight matches in
    unhighlightClassNameStringCSS class name applied to unhighlighted text
    unhighlightStyleObjectInline styles applied to unhighlighted text
    unhighlightTagNode or StringType of tag applied to unhighlighted parts. Defaults to span but can also be a React component
    *anyAny other props (such as title or data-*) are applied to the outer/wrapper <span>

  5. Use the Highlighter component

    master
    The Highlighter component is the primary entry point for react-highlight-words. It is used to wrap text and highlight specific words or phrases based on a provided array of search terms. It accepts props to control the text content, the terms to highlight, and the styling of the highlighted portions.