React-theme-switch-animation NPM

🎥 Demo

📝 Notes

The hook is only available in the browser environment. So if you use NextJS App router or any other framework that uses Server Components, you should use this hook in a Client Component by adding the directive use client
Currently works only if the project is using TailwindCSS
Ensure your project has the necessary TailwindCSS configuration for dark mode

🚀 Features

Toggles dark mode with an animation effect.
Smooth animations for theme switching.
Uses React Hooks for state management.
Supports TypeScript for enhanced development experience.
Uses localStorage to persist the dark mode state across sessions.
Provides a React ref that can be attached to any component to trigger the mode change.

📦 Installation

Install the package using npm or YARN:

npm install react-theme-switch-animation

yarn add react-theme-switch-animation

📚 Usage

Here’s how to use the useModeAnimation hook in your React component:

'use client'

import React from 'react'
import { useModeAnimation } from 'react-theme-switch-animation'

const MyComponent = () => {
  const { ref, toggleSwitchTheme, isDarkMode } = useModeAnimation()

  return (
    <button ref={ref} onClick={toggleSwitchTheme}>
      Toggle Dark Mode (Currently {isDarkMode ? 'Dark' : 'Light'} Mode)
    </button>
  )
}

export default MyComponent

📚 API

useModeAnimation accepts an optional props object with the following properties:

Property	Type	Default	Description
`duration`	number	`750`	Duration of the animation in milliseconds.
`easing`	string	`"ease-in-out"`	CSS easing type for the animation.
`pseudoElement`	string	`"::view-transition-new(root)"`	Pseudo-element used for the animation.
`globalClassName`	string	`"dark"`	Class name to apply to the root element.
`animationType`	ThemeAnimationType	`ThemeAnimationType.CIRCLE`	Type of animation effect (`CIRCLE` or `BLUR_CIRCLE`)
`blurAmount`	number	`2`	Blur intensity for blur circle animation.
`styleId`	string	`"theme-switch-style"`	ID for the style element (blur circle animation).
`isDarkMode`	boolean	`false`	Initial dark mode state.
`onDarkModeChange`	(isDark: boolean) => void	`undefined`	Callback function to handle dark mode change.

Animation Types

The hook supports two types of animations:

ThemeAnimationType.CIRCLE: A clean circle expansion animation (default)
ThemeAnimationType.BLUR_CIRCLE: A circle expansion with blur effect on the edges

Example usage with blur circle animation:

'use client'

import React from 'react'
import { ThemeAnimationType, useModeAnimation } from 'react-theme-switch-animation'

const MyComponent = () => {
  const { ref, toggleSwitchTheme, isDarkMode } = useModeAnimation({
    animationType: ThemeAnimationType.BLUR_CIRCLE,
    blurAmount: 4, // Optional: adjust blur intensity
    duration: 1000, // Optional: adjust animation duration
  })

  return (
    <button ref={ref} onClick={toggleSwitchTheme}>
      Toggle Dark Mode (Currently {isDarkMode ? 'Dark' : 'Light'} Mode)
    </button>
  )
}

export default MyComponent

Returns an object containing:

ref: React ref for attaching to the component that will trigger the dark mode toggle.
toggleSwitchTheme: Function to toggle dark mode.
isDarkMode: Current state of dark mode (true for dark, false for light).