React Simple Animated Dark Mode Button

Description

react-simple-animated-dark-mode-button library offers a customizable and visually appealing button component that seamlessly transitions between dark mode and light mode themes. This button is designed to simplify the integration of icon-based animations, enhancing user experience and interactivity within your React applications.

Installation

You can install the library using npm or yarn:

npm i react-simple-animated-dark-mode-button

# or

yarn add react-simple-animated-dark-mode-button

Usage Example

import { ThemeIconButton } from "react-simple-animated-dark-mode-button";

const Example = () => {
  const [isDarkMode, setIsDarkMode] = React.useState(false);

  return (
    <ThemeIconButton
      isDarkMode={isDarkMode}
      onClick={() => setIsDarkMode((_isDarkMode) => !_isDarkMode)}
      color={{
        // Give your Icon desired color
        light: "#5628EE",
        dark: "rgb(238 177 40)",
      }}
    />
  );
};

Props

| Name | Type | Default | Description | | ------------ | ---------- | -------- | ---------------------------------------------------------- | | onClick | function | Required | Function to be called when the button is clicked. | | isDarkMode | boolean | Required | Indicates whether the current theme mode is dark or light. | | color | object | Optional | Custom colors for the icon. |

Known Problems

With Chakra UI

If you have problem with missing animation in Chakra UI try

const [isDarkMode, setIsDarkMode] = React.useState(false);
const { toggleColorMode } = useColorMode();

<ThemeIconButton
  onClick={() => {
    toggleColorMode();
    setTimeout(() => {
      setIsDarkMode(!isDarkMode);
    }, 25);
  }}
/>;