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

    Install

    npm i @walltowall/highlighter

    DownloadsWeekly Downloads

    1

    Version

    0.1.2

    License

    MIT

    Unpacked Size

    14 kB

    Total Files

    16

    Last publish

    Collaborators

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