@themetransition/react
v0.0.4
Published
Check out the [Live Example](https://next-themes-example.vercel.app/) to try it for yourself.
Downloads
12
Readme
@themetransition/react
Check out the Live Example to try it for yourself.
Install
$ npm install @themetransition/react
# or
$ yarn add @themetransition/react
Usage
import { ThemeTransitionProvider } from "@themetransition/react"
function MyApp({ children }) {
return (
<html>
<head />
<body>
<ThemeTransitionProvider duration={0.9}>{children}</ThemeTransitionProvider>
</body>
</html>
)
}
export default MyApp
useTheme
Your UI will need to know the current theme and be able to change it. The useTheme
hook provides theme information:
import { useTheme } from "next-themes"
import { useThemeTransition } from "@themetransition/react"
const ThemeChanger = () => {
const { theme, setTheme } = useTheme()
const { handleThemeChange } = useThemeTransition({
setTheme,
theme
})
return (
<div>
The current theme is: {theme}
<button onClick={handleThemeChange("light")}>Light Mode</button>
<button onClick={handleThemeChange("dark")}>Dark Mode</button>
</div>
)
}