Highlighter

React component for rendering highlighted words from a string.

Installation

# npm
npm install @walltowall/highlighter

# yarn
yarn add @walltowall/highlighter

Usage

Supply your searchTerm and the React component you wish to render with renderHighlight for any matched word. The render function will receive the word as its first argument and the current index match as its second argument.

import { Highlighter } from '@walltowall/highlighter'

const Example = () => {
  return (
    <Highlighter
      searchTerm="word"
      renderHighlight={(word, idx) => <em key={idx}>{word}</em>}
    >
      Highlight your desired word! Any word will be wrapped with your
      `renderHighlight`!
    </Highlighter>
  )
}

<Highlighter> children must be a plain string. Providing a component such as a <div> will result in an error.

API

| Prop | Required? | Description | | --------------- | :-------: | ---------------------------------------------- | | searchTerm | Yes | The word to search for in the provided string. | | renderHighlight | Yes | A render prop to render any word match. |