@walltowall/highlighter

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.