React-dark-mode-toggle-2 NPM

react-dark-mode-toggle-2

A cute dark mode toggle 🦉

🗝 Key features

Small bundle size
Written in TypeScript
React 18 support
ESM support
SSR support

🚀 Installation

yarn add react-dark-mode-toggle-2

npm install react-dark-mode-toggle-2 --save

pnpm 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
      isDarkMode={isDarkMode}
      onChange={setIsDarkMode}
    />
  );
};

📌 Props

Prop	Type	Default	Required
`attributes`	optional object containing attributes to spread onto the button
`isDarkMode`	boolean	N/A	Yes
`onChange`	function that recieves a single argument: the new value of `isDarkMode`	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
`id`	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.