react-highlight-within

Zero-dependency React utility to highlight search terms within any component tree.

Example: highlighting search terms inside a component tree.

Installation

npm install react-highlight-within

Usage

import { highlightWithin } from "react-highlight-within";

function SearchResults() {
  const [search, setSearch] = useState("react");

  return (
    <div>
      {highlightWithin(
        <div>
          <h1>Learn React</h1>
          <p>React is awesome!</p>
        </div>,
        {
          search,
          bgColor: "#ffeb3b",
          textColor: "#000",
          caseSensitive: false,
        }
      )}
    </div>
  );
}

API

highlightWithin(element, options)

Options:

• search (string, required) - Text to highlight
• bgColor (string, optional) - Background color (default: '#FFD666')
• textColor (string, optional) - Text color (default: '#1C252E')
• caseSensitive (boolean, optional) - Case-sensitive search (default: false)
• highlightStyle (CSSProperties, optional) - Custom highlight styles

License

MIT