Implement a register function to register search input easily

Author: DevAnsar

README.md

@@ -67,11 +67,11 @@ function App() {
 ```jsx
 import { useSearch } from 'react-search-hook'
 function MyExampleComponent() {
-  const { search, setSearch } = useSearch('products')
+  const { register } = useSearch('products')
 
   return (
     <div>
-      <input onChange={(e) => setSearch(e.target.value)} />
+      <input {...register()} />
       <span>{search}</span>
     </div>
   )
@@ -86,11 +86,11 @@ function MyExampleComponent() {
 import { useSearch } from 'react-search-hook'
 function MyExampleComponent() {
   const items = ['text1', 'text2', ...]
-  const { search, setSearch, searchResult } = useSearch('products', { items })
+  const { register, searchResult } = useSearch('products', { items })
 
   return (
     <div>
-      <input onChange={(e) => setSearch(e.target.value)} />
+      <input {...register()} />
       {searchResult.map((item, key) => (
         <li>{JSON.stringify(item)}</li>
       ))}
@@ -115,6 +115,15 @@ function MyExampleComponent() {
 | 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 ✨
 
 [![Contributors](https://contrib.rocks/image?repo=DevAnsar/react-search-hook)](https://github.com/DevAnsar/react-search-hook/graphs/contributors)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-search-hook",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Search Library for React",
   "keywords": [
     "react",

src/__tests__/hook/useSearch.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { renderHook } from '@testing-library/react'
+import { render, renderHook, screen, fireEvent } from '@testing-library/react'
 import useSearch from '../../hooks/useSearch'
 import SearchProvider from '../../SearchProvider'
 import SearchContext from '../../SearchContext'
@@ -67,6 +67,23 @@ describe('useSearch', () => {
     expect(result.current.search).toEqual('product_search_value')
   })
 
+  it('should update search state with register and input', () => {
+    const fakeSearchState = {
+      stores: {},
+      changeStoreValue: jest.fn(),
+    }
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <SearchContext.Provider value={fakeSearchState}>
+        <SearchProvider stores={['product']}>{children}</SearchProvider>
+      </SearchContext.Provider>
+    )
+    const { result } = renderHook(() => useSearch('product'), { wrapper })
+
+    render(<input {...result.current.register()} />)
+    fireEvent.change(screen.getByRole('textbox'), { target: { value: 'product_search_value' } })
+    expect(result.current.search).toEqual('product_search_value')
+  })
+
   it('should filter data with search value (array of string)', () => {
     const fakeSearchContextValue: SearchContextType = {
       stores: {},

src/hooks/useSearch.ts

@@ -71,8 +71,13 @@ const useSearch = <TItem extends any>(
     searchResult = getfilterItems(search, options.items, options.searchProp)
   }
 
+  // This function returns an object with properties required for registering an input
+  const register = () => {
+    return { value: search, onChange: (e: React.ChangeEvent<HTMLInputElement>) => setSearch(e.target.value) }
+  }
+
   // Return an object containing search-related properties and functions.
-  return { search, setSearch, searchResult }
+  return { search, setSearch, register, searchResult }
 }
 
 /**

src/types.ts

@@ -50,6 +50,7 @@ export interface StoreData<T = string> {
 export interface UseSearchResponse<TItem = any> {
   search: string
   setSearch: (value: string) => void
+  register: () => {}
   searchResult: TItem[]
 }