A React utility hook for easy and dynamic toggling of CSS classes

npm install react-class-transition # or yarn add react-class-transition or pnpm add react-class-transition

import React from 'react'
import { useTransitions } from 'react-class-transition'

const ExampleComponent = () => {
  const [bind, run] = useTransitions({
    myElement: {
      // Apply the visible class wait 15 miliseonds and apply opacity-100
      fadeIn: ['visible', 15, 'opacity-100'],
      // Apply opacity-0 wait 200 miliseconds and apply the invisible class
      fadeOut: ['opacity-0', 150, 'invisible'],
    },
  })

  return (
    <div>
      <div ref={bind('myElement')} className="transition-all duration-150">
        Hello, World!
      </div>
      <button onClick={() => run('fadeIn')}>Fade In</button>
      <button onClick={() => run('fadeOut')}>Fade Out</button>
    </div>
  )
}