Introduction

React Search Hook is a lightweight library for React, with which you can store the search text in the Store and use it in other components.

Visit online demo

It is production-ready, and gives you the following:

• 📦 Very lightweight
• 🔧 Easy to use
• ⚛️ Build for React JS
• ⌨️ Highly typed and written in TypeScript

Documentation

1. Install

npm

npm i react-search-hook

yarn

yarn add react-search-hook

CDN

• unpkg: https://unpkg.com/[email protected]/dist/index.umd.js

• jsdelivr: https://cdn.jsdelivr.net/npm/[email protected]/dist/index.umd.js

2. Add provider to top of your component tree

import { SearchProvider } from 'react-search-hook'
function App() {
  return <SearchProvider stores={['products',...]}>{children}</SearchProvider>
}

notice that SearchProvider needs an array of strings to make stores

3. Simply you can import useSearch hook everywere

import { useSearch } from 'react-search-hook'
function MyExampleComponent() {
  const { register } = useSearch('products')

  return (
    <div>
      <input {...register()} />
      <span>{search}</span>
    </div>
  )
}

notice that useSearch needs the store name

If you need to filter some array of data, simply you can pass items to useSearch hook

import { useSearch } from 'react-search-hook'
function MyExampleComponent() {
  const items = ['text1', 'text2', ...]
  const { register, searchResult } = useSearch('products', { items })

  return (
    <div>
      <input {...register()} />
      {searchResult.map((item, key) => (
        <li>{JSON.stringify(item)}</li>
      ))}
    </div>
  )
}

APIs

useSearch(name,options)

| Name | Type | Required | Description | | ------- | ------------------------- | -------- | -------------------------------- | | name | string | yes | The name of store | | options | object UseSearchOptions | no | Pay attention to the table below |

useSearch options*

| Name | Type | Required | Description | | ---------- | --------------------------- | -------------------------- | -------------------------------------------------------------------------- | | items | array of strings or objects | | The array of strings or objects to be filtered | | searchProp | string | yes if each item is object | If each item is an object, it specifies the desired property of the filter |

useSearch responses

| Name | Type | Description | | ------------ | -------------- | ---------------------------------------------------------------------------------------------------------- | | seach | string | The current value of the specified store | | setSearch | function | function that updates the specified store | | register | function | This function returns an object with properties required for registering an input | | searchResult | array of items | If options include items (and a search property for array of objects), items will filter with search value |

Contributor ✨