@themetransition/react NPM

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

framer-motion html-to-image

0.0.4

1 year ago

0.0.3

1 year ago