rkusa / react-css-transition-hook

Minimal, zero-dependency React hook to CSS classname based transitions.

React CSS Transition Hook

Minimal, zero-dependency React hook to CSS classname based transitions.

NPM

npm install -S react-css-transition-hook

yarn add react-css-transition-hook

Example

Code | Demo

const { isOpen } = useMenu();
const [isVisible, props] = useTransition(isOpen, {
  entering: "transition ease-out duration-100 transform opacity-0 scale-95",
  entered: "transition ease-out duration-100 transform opacity-100 scale-100",
  exiting: "transition ease-in duration-75 transform opacity-100 scale-100",
  exited: "transition ease-in duration-75 transform opacity-0 scale-95",
});

if (!isVisible) {
  return null
}

return (
  <div {...props}>
    ...
  </div>
)

License

MIT