@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:

``bash
npm i react-dark-mode-toggle-2
`

##### yarn:

`bash
yarn add react-dark-mode-toggle-2
`

✨ Usage

`typescript jsx
import React from "react";
import { DarkModeToggle } from "react-dark-mode-toggle-2";

export const YourComponent = () => {
const [isDarkMode, setIsDarkMode] = React.useState(false);

return (
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.

$3

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