React Toggle Dark Mode
> 🌃 Animated dark mode toggle as seen in blogs!
## 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)):
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!
