Handy Filter Hook is a react hook for Handy Filter
npm install handy-filter-hook npm install handy-filter handy-filter-hook
yarn:
yarn add handy-filter handy-filter-hook
react or handy-filter. You only need to install them.handy-filter is 1.0.9``jsx
import React from 'react';
import { eq } from 'handy-filter';
import useFilter from 'handy-filter-hook';
const MyComponent = (data) => {
const [filteredData, setCondition] = useFilter({ init: data });
const onChangeHandler = (newValue) => {
setCondition(eq('nesded.someProp', newValue));
};
return
};
``$3
If you receive data asynchronously you can use the third function that is returned from
useFilter to set the received data:jsx
import React, { useEffect } from 'react';
import { ne } from 'handy-filter';
import useFilter from 'handy-filter-hook';
const MyComponent = () => {
const [filteredData, setCondition, setData] = useFilter();
const onChangeHandler = (newValue) => {
setCondition(ne('nesded.someProp', newValue));
};
useEffect(() => {
const getData = async () => {
const data = await myFetch();
setData(data);
};
});
return
};
`
> NOTE: the setCondition and setData are stable and won’t change on re-renders.
jsx
import React, { useEffect } from 'react';
import { icnt, eq } from 'handy-filter';
import useFilter from 'handy-filter-hook';const MyComponent = (data) => {
const [filteredData, setCondition] = useFilter({ init: data });
const onChangeHandler = (newValue) => {
setCondition(icnt('nesded.someProp', newValue), 'foo');
};
const onClickHandler = (newValue) => {
setCondition(eq('prop', newValue), 'bar');
};
return (
<>
>
);
};
`
> The key can be any value you want, all you need is for the key to be unique within one component.By default, conditions with different keys are joined with logical "and". If you want to change this
behavior see hook options.
Hook options
If you want to change the default hook behavior, you need to pass options object to useFilter:
`jsx
useFilter({ options: yourOptions })
`$3
Sets how the conditions with different keys will be joined.|Valid values|Default|
|:----------:|:-----:|
| and, or | and |
For example:
`jsx
import { gte, ne } from 'handy-filter';
import useFilter from 'handy-filter-hook';const init = [
{ foo: 10, bar: null },
{ foo: 20, bar: true },
{ foo: 50, bar: null },
{ foo: 100, bar: false },
{ foo: 5, bar: true },
];
const [filteredData, setCondition] = useFilter({ init, options: { join: / 'and' or 'or' / } });
setCondition(gte('foo', 20), 'key1');
setCondition(ne('bar', null), 'key2');
// if the join option is 'and' result will be
// [{ foo: 20, bar: true }, { foo: 100, bar: false }]
// if the join option is 'or' result will be
// [{ foo: 20, bar: true }, { foo: 50, bar: null }, { foo: 100, bar: false }, { foo: 5, bar: true }]
``