1.0.4 • Published 2 years ago
react-filter-element v1.0.4
React Filter Element
Use this hook to easily filter out your html element within a parent element.
Installation
$ npm i react-filter-element
Using ->
Import the module
Import useFilterElement
hook from the module
import React from 'react';
import useFilterElement from 'react-filter-element';
You also need to import useRef
hook from react to target the parent element
import React,{useRef} from 'react';
import useFilterElement from 'react-filter-element';
Next you need to use the useRef
hook to target the element and pass the element when calling the useFilterElement
hook
const parent = useRef(null);
const [filter,items] = useFilterElement(parent); // calling the hook with the parent
<div ref={parent}></div> // html
you will get back filter
and items
from the hook. filter
refers to the main function to use the filter and items
contains the childs
Now call the function with a key name as argument and set the key name as a class of the childs ( you can also pass *
as key , it will show every child)
<button onClick={() => filter('bird')}>Birds</button>
<button onClick={() => filter('fish')}>Fish</button>
<div className="bird">
<h1>Bird</h1>
</div>
<div className="fish">
<h1>Fish</h1>
</div>
full sample code
import React,{useRef} from 'react';
import useFilterElement from 'react-filter-element';
const parent = useRef(null);
const [filter,items] = useFilterElement(parent); // calling the hook with the parent
// html
<button onClick={() => filter('bird')}>Birds</button>
<button onClick={() => filter('fish')}>Fish</button>
<div ref={parent}>
<div className="bird">
<h1>Bird</h1>
</div>
<div className="fish">
<h1>Fish</h1>
</div>
</div>
Live working demo here