# react-dark-mode-toggle-2

> An updated, cute dark mode toggle button for React.

Latest version **2.1.1** (published 2024-11-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-dark-mode-toggle-2
pnpm add react-dark-mode-toggle-2
yarn add react-dark-mode-toggle-2
bun add react-dark-mode-toggle-2
```

## Health

**Score 40/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.1 |
| Published | 2024-11-08 |
| First published | 2021-10-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 566.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 27 |
| Author | Todd Elvers |
| Maintainers | telvers |
| Keywords | react, dark, night, mode, toggle, button, switch |

## Links

- npm: https://www.npmjs.com/package/react-dark-mode-toggle-2
- Repository: https://github.com/todd-elvers/react-dark-mode-toggle-2
- npm.io page: https://npm.io/package/react-dark-mode-toggle-2

## Dependencies (2)

- [classnames](https://npm.io/package/classnames.md) ^2.5.1
- [react-lottie-player](https://npm.io/package/react-lottie-player.md) ^2.1.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.1.1 (latest) — 2024-11-08
- 2.1.1-alpha.0 — 2024-11-08
- 2.1.0 — 2024-11-07
- 2.0.9 — 2024-01-09
- 2.0.8 — 2023-01-10
- 2.0.7 — 2022-09-01
- 2.0.6 — 2022-09-01
- 2.0.5 — 2022-07-26
- 2.0.4 — 2022-07-25
- 2.0.2 — 2021-10-28
- 2.0.1 — 2021-10-28
- 2.0.0 — 2021-10-28
- 1.0.0 — 2021-10-28
- 0.0.2 — 2021-10-27

## README

# react-dark-mode-toggle-2

<p align="center">
  <img src="./assets/title.gif" width="300" height="300" />
</p>

<p align="center">
<a href="https://reactjs.org/">
    <img alt="react" src="https://badges.aleen42.com/src/react.svg" >
</a>
<a href="https://www.typescriptlang.org">
    <img alt="code language: typescript" src="https://badges.aleen42.com/src/typescript.svg">
</a>
<a href="#">
    <img alt="latest release" src="https://img.shields.io/npm/v/react-dark-mode-toggle-2?color=darkgreen&label=latest">
</a>
<a href="#">
    <img alt="bundle size" src="https://img.badgesize.io//todd-elvers/react-dark-mode-toggle-2/main/assets/index.cjs.js.svg?compression=gzip">
</a>
</p>

A cute dark mode toggle 🦉

## 🗝 Key features

- Small bundle size <a href="#">
  <img alt="bundle size" src="https://img.badgesize.io//todd-elvers/react-dark-mode-toggle-2/main/assets/index.cjs.js.svg?compression=gzip">
  </a>
- Written in TypeScript
- React 18 support
- ESM support
- SSR support

## 🚀 Installation

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

or

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

or

```bash
pnpm 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 (
    <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](https://github.com/donavon/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](https://github.com/cawfree/react-dark-mode-toggle/issues/17) for more information and available workarounds. 


### 🤝 Original Work
Original library [react-dark-mode-toggle](https://github.com/cawfree/react-dark-mode-toggle) was created by
[Alex Thoma](https://github.com/cawfree). Credit to them and the community for the original work.


## ✌️ License
[MIT](https://opensource.org/licenses/MIT)

---
_Source: https://npm.io/package/react-dark-mode-toggle-2 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._