@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