https://github.com/dendrofen/react-search-box-hooks
React hooks for constructing search boxes with filters, using callbacks.
https://github.com/dendrofen/react-search-box-hooks
boilerplate chakra-ui docker docker-compose react react-api-hooks react-filter react-hooks react-library react-search react-search-box react-search-component search-box
Last synced: about 1 year ago
JSON representation
React hooks for constructing search boxes with filters, using callbacks.
- Host: GitHub
- URL: https://github.com/dendrofen/react-search-box-hooks
- Owner: dendrofen
- License: mit
- Archived: true
- Created: 2023-02-15T18:15:11.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-02-20T05:00:26.000Z (over 3 years ago)
- Last Synced: 2025-03-19T14:49:21.840Z (about 1 year ago)
- Topics: boilerplate, chakra-ui, docker, docker-compose, react, react-api-hooks, react-filter, react-hooks, react-library, react-search, react-search-box, react-search-component, search-box
- Language: JavaScript
- Homepage: https://dendrofen.github.io/react-search-box-hooks/
- Size: 1.64 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://bundlephobia.com/result?p=react-search-box-hooks)
[](https://www.npmjs.com/package/react-search-box-hooks)
[](https://www.npmjs.com/package/react-search-box-hooks)
# React Search Box Hooks
This library provides a set of React hooks to construct search boxes for your application.
## Installation
To install the package, use:
```bash
npm i react-search-box-hooks
```
or
```bash
yarn add react-search-box-hooks
```
## Usage
The library provides two hooks: `useSearchBox` and `useSearchBoxInput`.
### useSearchBox
The `useSearchBox` hook provides a state object and an action to update the search parameters, and a method to query the data. It requires two parameters:
- `queryFunc`: The function to query the data. It takes a single argument, the search parameters object, and returns a Promise that resolves to an array of search results and the total number of search results.
- `initParams`: The initial search parameters object.
The `useSearchBox` hook returns an object with the following properties:
- `items`: The array of search results.
- `totalCount`: The total number of search results.
- `isLoading`: A boolean value indicating whether the search is in progress.
- `params`: The search parameters object.
- `dispatchParams`: An action to update the search parameters.
**Example of usage**
```js
function MyComponent() {
const queryFunc = useCallback((params) => {
const items = []
const totalCount = items.length
resolve([items, totalCount]);
}, []);
const { items, totalCount, isLoading, params, dispatchParams } = useSearchBox(queryFunc, { count: 0 });
const onInc = useCallback(() => {
dispatchParams({ key: "count", value: params.count + 1 });
}, [dispatchParams, params]);
// render the search box UI
}
```
### useSearchBoxInput
The `useSearchBoxInput` hook provides handlers for the search box input field. It requires three parameters:
- `dispatchParams`: An action to update the search parameters.
- `paramKey`: The key of the search parameter to update.
- `debounceTimeout`: The debounce timeout value in milliseconds.
The `useSearchBoxInput` hook returns an object with the following properties:
- `ref`: A ref to the input element.
- `onInput`: A handler for the input event.
- `onChange`: A handler for the change event.
- `onClear`: A handler for the clear button event.
- `isClearable`: A boolean value indicating whether the clear button should be shown.
**Example of usage**
```js
function MyComponent() {
const queryFunc = useCallback((params) => {
const items = Array.from(params.query || "");
return [items, items.length];
}, []);
const { items, totalCount, isLoading, params, dispatchParams } = useSearchBox(queryFunc, { query: 'search-box-hooks' });
const { ref, onInput, onChange, onClear, isClearable } = useSearchBoxInput( dispatchParams, "query" );
return (
<>
{isClearable && clear}
{/* the search box UI */}
>
)
}
```
## Contributing
Contributions are welcome. To contribute, fork the repository, create a branch for your changes, and submit a pull request. Please make sure that your changes are covered by tests and that the existing tests pass.
## License
This library is licensed under the MIT License. See the [LICENSE](./LICENSE) file for more information.