react-search-hook

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/react-search-hook@0.1.0/dist/index.umd.js

• jsdelivr: https://cdn.jsdelivr.net/npm/react-search-hook@0.1.0/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 ✨