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