https://github.com/minhomega/react-theme-switch-animation
React Theme Switch with smooth animation supports dark and light modes on NextJS, ReactJS, and more ...
https://github.com/minhomega/react-theme-switch-animation
animation-css animation-effects dark-theme hook nextjs nextjs14-typescript react-themes reactjs theme typescript
Last synced: about 1 year ago
JSON representation
React Theme Switch with smooth animation supports dark and light modes on NextJS, ReactJS, and more ...
- Host: GitHub
- URL: https://github.com/minhomega/react-theme-switch-animation
- Owner: MinhOmega
- License: mit
- Created: 2024-06-23T08:16:25.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-04-20T06:37:48.000Z (about 1 year ago)
- Last Synced: 2025-05-09T00:12:55.170Z (about 1 year ago)
- Topics: animation-css, animation-effects, dark-theme, hook, nextjs, nextjs14-typescript, react-themes, reactjs, theme, typescript
- Language: TypeScript
- Homepage: https://minhomega.github.io/react-theme-switch-animation/
- Size: 407 KB
- Stars: 17
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
React Theme Switch Animation Hook
This package provides a hook for toggling dark mode in React applications with a smooth animation effect in TailwindCSS.
## 🎥 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`](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
- 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:
```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 (
Toggle Dark Mode (Currently {isDarkMode ? 'Dark' : 'Light'} Mode)
)
}
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. |
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).
## 📝 Requirements
- React 16.8 or later (for Hooks support).
- TypeScript for compiling the package during installation.
## 🤝 Contributing
Contributions are welcome! Please open an issue or submit a pull request with your suggested changes.
## 📜 License
MIT