filter-hook
v1.0.1
Published
A React custom hook that takes an array of filter names and implements all the data and functions necessary for displaying them.
Downloads
3
Readme
This is just a simple custom react hook for using filters on some data. First You have to make sure your data is array and each element in it is an object that contain "tags" which is an array of strings. I know it's a little confusing and has a lot of rules but i will try to make it as simple as possible in future. You can see the example below:
const initialData = [
{... ,
tags : [...]
},
{...,
tags: [...]
}
]
Second you have to pass filters which are arrays of strings. e.g:
const filters = ['tag1', 'tag2', 'tag3']
and there you go you are finished.
Now let's see what data you will get: First of all you will get all the filters as an object which either are true or false.
{
tag1: true,
tag2: true,
tag3: true
}
Then you will get a function that you can use to filter the data. e.g on a button.
And finally you will get the filtered Data which is an array of objects and you can just map over it. Here is the final code:
const [filtersToDisplay, changeFilter, filteredData] = useFilter(initData, filters)
I will be completing this in the future and will add more features and of course with better documentation.