Rewrite of a cute dark mode toggle 🦉
Original library react-dark-mode-toggle was created by Alex Thoma. Credit goes out to those who helped build that library to what it is today. Let's see if we can take it even further.
This rewrite:
- Adds native TS support
- Adds Rollup bundling support (ESM/CJS output targets)
- Adds CSS vendor prefixing via Emotion
- Resolves issue where prop
checked
istrue
but the toggle initially renders in light-mode then snaps to dark-mode - Updates
react-lottie-player
to latest for TS support & to fix the above flickering problem - Project infrastructure (e.g. prettier, husky, lint-staged, etc.)
react-lottie-player is used to render a Lottie
file (i.e. a JSON payload) in a React component we call DarkModeToggle
. This underlying library is a
peer dependency of the project which is why you'll see it in the installation instructions below.
npm
:
npm i react-dark-mode-toggle-2
yarn
:
yarn add react-dark-mode-toggle-2
import React from "react";
import { DarkModeToggle } from "react-dark-mode-toggle-2";
export const YourComponent = () => {
const [isDarkMode, setIsDarkMode] = React.useState(false);
return (
<DarkModeToggle
onChange={setIsDarkMode}
isDarkMode={isDarkMode}
size={85}
/>
);
};
Prop | Type | Default | Required |
---|---|---|---|
onChange |
func | N/A | Yes |
isDarkMode |
boolean | N/A | Yes |
size |
number (defaults to px ) or a string containing a number+unit (e.g "10px" , "2em" , "4.5rem" , "100%" , etc). These units may also have a space between them (e.g. "10 px" , "2 em" , etc). |
85px |
No |
speed |
number | 1.3 |
No |
className |
string | '' |
No |
Note, this is not a dark mode theme implementation; it's just a button! You'll need to mix this with a management solution such as use-dark-mode.
In Chrome, you may experience a blue outline around the toggle button after clicking it. If this behavior concerns you see this issue for more information and available workarounds.