Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

animated-toggle-button

siamahnaf16MIT1.1.0TypeScript support: included

A simple react dark mode toggler component🤷

react, nextjs, one-time-password, otp-timer, otptimer, otp, otp-timer, timer, reactotptimer

readme

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