Usage no npm install needed!

<script type="module">
  import reactCssTransitionHook from 'https://cdn.skypack.dev/react-css-transition-hook';
</script>

README

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 [showMenu, className] = 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",
});

return (
  <div>
    {showMenu && (
      <div className={className}>
        ...
      </div>
    )}
  </div>
)

License

MIT