No! Primate Mutation!

    react-dark-mode-toggle-2
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.2 • Public • Published

    react-dark-mode-toggle-2

    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.

    react code language: typescript vitejs code style: prettier latest release

    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 react-lottie-player
    yarn:
    yarn add react-dark-mode-toggle-2 react-lottie-player

    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

    Install

    npm i react-dark-mode-toggle-2

    DownloadsWeekly Downloads

    29

    Version

    2.0.2

    License

    MIT

    Unpacked Size

    1.01 MB

    Total Files

    6

    Last publish

    Collaborators

    • telvers