README

@agney/react-dark-mode-toggle

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.

Switches out emotion for goober from the original repository.

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 is true 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.)

How it works

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.

🚀 Installation

`npm`:

npm i react-dark-mode-toggle-2

`yarn`:

yarn add react-dark-mode-toggle-2

✨ Usage

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} 
    />
  );
};

📌 Props

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.

📝 Notes

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.

✌️ License

MIT

Usage no npm install needed!