React Hooks that fadeIn / Out elements - DEMO(storybook)
npm install --save react-hooks-fader
yarn add react-hooks-fader
import useFader from 'react-hooks-fader';
const SomeComponent = () => {
const [ref, _, setShow] = useFader<HTMLDivElement>();
function handleClick() {
setShow(false);
}
return (
<div ref={ref}>
{/* contents... */}
<button onClick={handleClick}>
Close
</button>
</div>
);
};
interface Options {
initialShow?: boolean;
duration?: number | {
show: number;
hide: number;
};
onEnter?: () => void;
onEntered?: () => void;
onExit?: () => void;
onExited?: () => void;
}
Try it on the demo site!
Thanks!.