README
react-hook-filters
react custom hook to handle filters in web apps (set, get) data from search params and more..
Installation
npm
npm install react-hook-filters
yarn
yarn add react-hook-filters
Usage
import useFilters from 'react-hook-filter';
const initialFilters = { name: '', age: '', gender: '' };
const Home = ({ ...props }) => {
const { filters, changeFilters, resetFilters, submitFilters } = useFilters({
initialFilters,
});
const handleSubmit = (e: any) => {
e.preventDefault();
submitFilters(); //this will append filters to search params
};
return (
<div className={styles.Home}>
<form onSubmit={handleSubmit}>
<input
placeholder="name"
value={filters.name}
type="text"
onChange={e => changeFilters('name', e.target.value)}
/>
<select onChange={e => changeFilters('gender', e.target.value)}>
<option value="male">male</option>
<option value="female">female</option>
</select>
<input
placeholder="age"
value={filters.age}
type="number"
onChange={e => changeFilters('age', e.target.value)}
/>
<button type="submit">submit</button>
<button onClick={resetFilters}>reset</button>
</form>
</div>
);
};
export default Home;