react-hooks-fader v0.0.2

React Hooks Fader

React Hooks that fadeIn / Out elements - DEMO(storybook)

Installation

npm install --save react-hooks-fader
yarn add react-hooks-fader

Usage

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>
  );
};

Options

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!.