search-children

React component that lets you specify text to find and mark/highlight

Install

npm install search-children

Usage

import React, { useState } from 'react'
import Search, { Pierce } from 'search-children'

const Deep = () =>
  <p>
    It can even find text rendered by a component (as opposed to just children),
    using the accompanying Pierce element
  </p>

const SearchExample = () => {
  const [searchCount, setSearchCount] = useState(0)
  const handleSearchDone = ({ count }) => setSearchCount(count)
  return (
    <Search value='find' onDone={handleSearchDone}>
      <p>search-children finds text in any amount of nesting</p>
      <Pierce><Deep /></Pierce>
      <p>Here, search-children finds {searchCount.toString()} results.</p>
    </Search>
  )
}

The accompanying Pierce element messes with React's mechanisms for rendering components, so please use with caution/testing.

Props

| Property | Type | Description | |---|---|---| | value | String | Text to search for. This is the only required prop. | | onDone | Function | Called with a { count } object indicating number of matches | | test | Boolean | Use this to mark all text under search-children's purview | | highlighterProps | HighlighterProps | Props to pass to the underlying search component, react-highlight-words | | highlightTag | ReactNode | Tag to wrap around highlighted matches. Defaults to <mark> |

License

MIT © jfrancos