Animated dark mode toggle as seen in blogs!
npm install react-toggle-dark-mode> 🌃 Animated dark mode toggle as seen in blogs!
!Interactive sun and moon transition
- node >=10
``shell`
npm i react-toggle-dark-mode
or with Yarn:
`shell`
yarn add react-toggle-dark-mode
`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 (
checked={isDarkMode}
onChange={toggleDarkMode}
size={120}
/>
);
};
`
#### 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. |
`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 },
};
Thanks goes to these wonderful people (emoji key):
Jose Felix 💻 📖 ⚠️ |
This project follows the all-contributors specification.
Contributions of any kind are welcome!
Give a ⭐️ if this project helped you!