Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
react-toggle-dark-mode
Advanced tools
🌃 Animated dark mode toggle as seen in blogs!
npm i react-toggle-dark-mode
or with Yarn:
yarn add react-toggle-dark-mode
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}
/>
);
};
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. |
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!
FAQs
Animated dark mode toggle as seen in blogs!
The npm package react-toggle-dark-mode receives a total of 2,770 weekly downloads. As such, react-toggle-dark-mode popularity was classified as popular.
We found that react-toggle-dark-mode demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.