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. |