animated-toggle-button
TypeScript icon, indicating that this package has built-in type declarations

1.0.8Ā ā€¢Ā PublicĀ ā€¢Ā Published

React Animated Toggle Button

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

Interactive sun and moon transition

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

Package Sidebar

Install

npm i animated-toggle-button

Weekly Downloads

7

Version

1.0.8

License

MIT

Unpacked Size

490 kB

Total Files

14

Last publish

Collaborators

  • siamahnaf