animated-toggle-button v1.0.8

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

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