Package Exports

react-toggle-dark-mode
react-toggle-dark-mode/dist/index.js
react-toggle-dark-mode/dist/react-toggle-dark-mode.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-toggle-dark-mode) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Toggle Dark Mode

Bundle size

🌃 Animated dark mode toggle as seen in blogs!

Interactive sun and moon transition

Prerequisites

node >=10

Installation

npm i react-toggle-dark-mode

or with Yarn:

yarn add react-toggle-dark-mode

Usage

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DarkModeSwitch } from 'react-toggle-dark-mode';

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 },
};

Contributors

Thanks goes to these wonderful people (emoji key):

_{Jose Felix}
💻 📖 ⚠️

This project follows the all-contributors specification. Contributions of any kind are welcome!

Show your support

Give a ⭐️ if this project helped you!