https://github.com/joserfelix/react-toggle-dark-mode

🌃 A sleek dark mode toggle button for React.
https://github.com/joserfelix/react-toggle-dark-mode

Last synced: 6 days ago
JSON representation

🌃 A sleek dark mode toggle button for React.

• Host: GitHub
• URL: https://github.com/joserfelix/react-toggle-dark-mode
• Owner: JoseRFelix
• License: mit
• Created: 2020-07-14T06:15:32.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-03-05T05:45:03.000Z (over 1 year ago)
• Last Synced: 2024-11-11T18:12:57.969Z (7 days ago)
• Language: TypeScript
• Homepage: https://react-toggle-dark-mode.netlify.app/
• Size: 1.91 MB
• Stars: 178
• Watchers: 2
• Forks: 16
• Open Issues: 34
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  
React Toggle Dark Mode





  

    

  

  

  

    

   

  

    

  

   



> 🌃 Animated dark mode toggle as seen in blogs!

![Interactive sun and moon transition](./docs/demo.gif)

## Prerequisites

- node >=10

## Installation

```shell

npm i react-toggle-dark-mode

```

or with Yarn:

```shell

yarn add react-toggle-dark-mode

```

## Usage

```jsx

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 (

    

  );

};

```

## 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

```javascript

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](https://allcontributors.org/docs/en/emoji-key)):

  

    
Jose Felix
💻 📖 ⚠️    

    

This project follows the [all-contributors](https://allcontributors.org) specification.

Contributions of any kind are welcome!

## Show your support

Give a ⭐️ if this project helped you!