useFilters Hook
A React hook to easily manage filters for data fetching or UI manipulation.
Table of Contents
Installation
Install using npm:
npm install use-filters-hookOr with yarn:
yarn add use-filters-hookPeer Dependencies: Ensure that you have react installed in your project.
Usage
First, import the useFilters hook:
import useFilters from "use-filters-hook"Then, in your component:
const [currentFilters, dispatch] = useFilters(initialFilters, dispatchFunction)API
Methods
| Method | Description | Example Usage |
|---|---|---|
addFilter |
Add or update filters. Updates if a filter for a given field exists; adds if not. | actions.addFilter({field: 'name', ...}) |
updateFilters |
Directly update the filter array. | actions.updateFilters(newFilters) |
clearFilter |
Clear a specific filter by providing a field name. If no field is provided, clears all filters. | actions.clearFilter('name') |
Filter Anatomy
Each filter has the following structure:
| Property | Type | Description | Optional |
|---|---|---|---|
field |
string |
Specifies the name of the field to filter on. | No |
label |
string |
An optional display label for the filter. | Yes |
value |
any |
Specifies the value to filter by. | No |
condition |
string |
Specifies the condition under which the filtering occurs. | No |
Example
function App() {
const [filters, setFilters] = useState<IFilter[]>([])
const [, { addFilter, updateFilters, clearFilter }] = useFilters(
filters,
setFilters
)
const onAdd = () => {
addFilter({
field: `Field ${Math.random()}`,
condition: `Condition ${Math.random()}`,
value: Math.random(),
})
}
return (
<>
<button onClick={onAdd}>Add Filter</button>
<button
onClick={() =>
updateFilters([
{
field: `Field ${Math.random()}`,
condition: `Condition ${Math.random()}`,
value: Math.random(),
},
])
}>
Update Filter
</button>
<button onClick={() => clearFilter()}>Clear</button>
Filters: {JSON.stringify(filters)}
</>
)
}Contribution
Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change. Ensure to update tests as appropriate.