npm

@walltowall/highlighter
TypeScript icon, indicating that this package has built-in type declarations

0.1.2 • Public • Published

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.

Package Sidebar

Install

npm i @walltowall/highlighter

Weekly Downloads

0

Version

0.1.2

License

MIT

Unpacked Size

14 kB

Total Files

16

Last publish

Collaborators

  • kalamak
  • walltowall-dev
  • angeloashmore
  • asyarb
  • kangken