A Dynamic CSS Class Toggling React Utility Hook

28 August 2023
0
36

A React utility hook for easy and dynamic toggling of CSS classes. Ideal for animating HTML elements based on user interactions or application state changes. Comes with configurable class sequences and time delays for flexible animation effects.

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

Usage

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