react-theme-switch-animation

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

react-theme-switch-animation

★ 63 Open GitHub ↗

React Theme Switch with smooth animation supports dark and light modes on NextJS, ReactJS, and more ...

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h1 align="center">
  <h1 align="center">React Theme Switch Animation Hook</h1>
  <p align="center">
  Beautiful, smooth animations for theme switching in React applications. Built with TypeScript and powered by the View Transition API.
  </p>
</h1>

<p align="center">
  <strong>
    <a href="https://minhomega.github.io/react-theme-switch-animation/" target="_blank">🚀 Live Demo</a> |
    <a href="https://www.npmjs.com/package/react-theme-switch-animation" target="_blank">📦 npm Package</a> |
    <a href="https://github.com/minhomega/" target="_blank">💼 Hire me</a>
  </strong>
</p>

## 🎥 Demo

### ✨ Six Animation Types Available

- **🔵 Circle**: Smooth expanding circle transition
- **🌀 Blur Circle**: Circle with elegant blur effect on the edges
- **📱 QR Scan**: Scanning line sweeps left to right (like QR code reader)
- **🔷 Polygon**: Diagonal wipe that sweeps across the screen
- **📐 Polygon Gradient**: Diagonal wipe with a soft gradient edge
- **🎬 Custom GIF**: Reveal the new theme through any GIF mask of your choice

## 📝 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`](https://react.dev/reference/react/use-client)
- Currently works only if the project is using TailwindCSS
- Ensure your project has the necessary TailwindCSS configuration for dark mode

## 🚀 Features

- **🎨 Multiple Animation Types**: Circle, Blur Circle, QR Scan, Polygon, Polygon Gradient, and Custom GIF animations
- **⚡ High Performance**: Optimized for high-resolution displays with smooth 60fps animations
- **🎯 View Transition API**: Leverages modern browser APIs for seamless transitions
- **📱 Responsive Design**: Works perfectly across all device sizes and screen resolutions
- **♿ Accessibility First**: Respects `prefers-reduced-motion` and provides fallback experiences
- **🔧 TypeScript Support**: Full TypeScript support for enhanced development experience
- **💾 State Persistence**: Uses `localStorage` to persist theme state across sessions
- **🎛️ Highly Customizable**: Configure duration, easing, blur amount, and more
- **🪝 React Hooks**: Clean, modern React Hooks API

## 📦 Installation

Install the package using npm or YARN:

```bash
npm install react-theme-switch-animation
```

or

```bash
yarn add react-theme-switch-animation
```

## 📚 Usage

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

```jsx
'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 (defaults to `1500` for `POLYGON_GRADIENT` and `2000` for `GIF`). |
| `easing`           | string                    | `"ease-in-out"`                 | CSS easing for the animation (defaults to an expo curve for `POLYGON`, `POLYGON_GRADIENT`, and `GIF`).      |
| `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`, `BLUR_CIRCLE`, `QR_SCAN`, `POLYGON`, `POLYGON_GRADIENT`, `GIF`)         |
| `blurAmount`       | number                    | `2`                             | Blur intensity for blur circle animation.                                                                   |
| `gifUrl`           | string                    | `undefined`                     | URL of the GIF used as the reveal mask (required for the `GIF` animation type).                             |
| `styleId`          | string                    | `"theme-switch-style"`          | ID for the injected style element (blur circle, polygon gradient, and gif animations).                      |
| `isDarkMode`       | boolean                   | `false`                         | Initial dark mode state.                                                                                    |
| `onDarkModeChange` | (isDark: boolean) => void | `undefined`                     | Callback function to handle dark mode change.                                                               |

### Animation Types

The hook supports six types of animations:

- `ThemeAnimationType.CIRCLE`: A clean circle expansion animation (default)
- `ThemeAnimationType.BLUR_CIRCLE`: A circle expansion with blur effect on the edges
- `ThemeAnimationType.QR_SCAN`: A scanning line that sweeps from left to right
- `ThemeAnimationType.POLYGON`: A diagonal wipe — toward dark it sweeps from the top-left corner, back to light from the bottom-right
- `ThemeAnimationType.POLYGON_GRADIENT`: A diagonal wipe with a soft gradient edge expanding from the top-left corner
- `ThemeAnimationType.GIF`: Reveals the new theme through a custom GIF mask that scales up to fill the screen (requires `gifUrl`)

### Examples for Each Animation Type

#### Circle Animation (Default)

```jsx
'use client'