# react-search-box-hooks
> React hooks for constructing search boxes with filters, using callbacks
Latest version **0.2.6** (published 2023-02-20) · MIT license · 0 weekly downloads
## Install
```sh
npm install react-search-box-hooks
pnpm add react-search-box-hooks
yarn add react-search-box-hooks
bun add react-search-box-hooks
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.2.6 |
| Published | 2023-02-20 |
| First published | 2023-02-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 11.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | dendrofen |
| Maintainers | dendrofen |
| Keywords | react, react-components, components, components-develop, search-box, react-hooks, react-filter-box, react-search-box, custom-search-box, custom-filter-box, search-box-api, search-box-data, search-list-api, search-list-hooks, search-box-hooks, search-hooks, react-search, react-development, react-custom, react-ui, react-logic, component-part |
## Links
- npm: https://www.npmjs.com/package/react-search-box-hooks
- Repository: https://github.com/dendrofen/react-search-box-hooks
- Homepage: https://dendrofen.github.io/react-search-box-hooks
- Issues: https://github.com/dendrofen/react-search-box-hooks/issues
- npm.io page: https://npm.io/package/react-search-box-hooks
## Dependencies (1)
- [react](https://npm.io/package/react.md) ^18.2.0
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 0.2.6 (latest) — 2023-02-20
- 0.2.5-beta — 2023-02-20
- 0.2.5 — 2023-02-20
- 0.2.4 — 2023-02-20
- 0.2.3 — 2023-02-20
- 0.2.2 — 2023-02-20
## 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 && }
{/* 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.
---
_Source: https://npm.io/package/react-search-box-hooks · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
