https://github.com/jfrancos/search-children

React component that lets you specify text to find and mark
https://github.com/jfrancos/search-children

Last synced: 26 days ago
JSON representation

React component that lets you specify text to find and mark

• Host: GitHub
• URL: https://github.com/jfrancos/search-children
• Owner: jfrancos
• Created: 2020-06-15T15:48:47.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-07-13T18:54:59.000Z (over 1 year ago)
• Last Synced: 2024-09-14T17:44:30.075Z (about 2 months ago)
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/search-children
• Size: 2.86 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 6
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

# search-children

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

[![NPM](https://img.shields.io/npm/v/search-children.svg)](https://www.npmjs.com/package/search-children) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash

npm install search-children

```

## Usage

```tsx

import React, { useState } from 'react'

import Search, { Pierce } from 'search-children'

const Deep = () =>

  


    It can even find text rendered by a component (as opposed to just children),

    using the accompanying Pierce element

  


const SearchExample = () => {

  const [searchCount, setSearchCount] = useState(0)

  const handleSearchDone = ({ count }) => setSearchCount(count)

  return (

    

      
search-children finds text in any amount of nesting

      

      
Here, search-children finds {searchCount.toString()} results.

    

  )

}

```


![](https://raw.githubusercontent.com/jfrancos/search-children/master/example/public/Example.png?token=ADRRWWPZZUDSXJ3333PADVC66EYDA)

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](https://github.com/bvaughn/react-highlight-words) |

| highlightTag | ReactNode | Tag to wrap around highlighted matches.  Defaults to `` |

## License

MIT © [jfrancos](https://github.com/jfrancos)