React Animated Toggle Button
This is a fork of react-toggle-dark-mode fixing installation warning issues
Installation
npm i animated-toggle-button
or with Yarn:
yarn add animated-toggle-button
Usage
import { DarkModeSwitch } from 'animated-toggle-button';
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 },
};
Show your support
Give a
Stay in touch
- Author - Siam Ahnaf
- Website - https://www.siamahnaf.com/
- Twitter - https://twitter.com/siamahnaf198
- Github - https://github.com/siamahnaf198