This is a fork of react-toggle-dark-mode fixing installation warning issues

Installation

npm i animated-toggle-button

or with Yarn:

yarn add animated-toggle-button

Usage

import { DarkModeSwitch } from 'animated-toggle-button';

const App = () => {
  const [isDarkMode, setDarkMode] = React.useState(false);

  const toggleDarkMode = (checked: boolean) => {
    setDarkMode(checked);
  };

  return (
    <DarkModeSwitch
      style={{ marginBottom: '2rem' }}
      checked={isDarkMode}
      onChange={toggleDarkMode}
      size={120}
    />
  );
};

API

DarkModeSwitch

Props

| Name | Type | Default Value | Description | | ------------------- | ---------------------------- | ------------------------------- | ----------------------------------------- | | onChange | (checked: boolean) => void | | Event that triggers when icon is clicked. | | checked | boolean | false | Current icon state. | | style | Object | | CSS properties object. | | size | number | 24 | SVG size. | | animationProperties | Object | defaultProperties (see below) | Override default animation properties. | | moonColor | string | white | Color of the moon. | | sunColor | string | black | Color of the sun. |

Default Animation Properties

const defaultProperties = {
  dark: {
    circle: {
      r: 9,
    },
    mask: {
      cx: '50%',
      cy: '23%',
    },
    svg: {
      transform: 'rotate(40deg)',
    },
    lines: {
      opacity: 0,
    },
  },
  light: {
    circle: {
      r: 5,
    },
    mask: {
      cx: '100%',
      cy: '0%',
    },
    svg: {
      transform: 'rotate(90deg)',
    },
    lines: {
      opacity: 1,
    },
  },
  springConfig: { mass: 4, tension: 250, friction: 35 },
};

Show your support

Give a ⭐️ if this project helped you!

Stay in touch

• Author - Siam Ahnaf
• Website - https://www.siamahnaf.com/
• Twitter - https://twitter.com/siamahnaf198
• Github - https://github.com/siamahnaf198