# react-dark-mode-toggle

> 🦉 A cutesy dark mode toggle button for React.

Latest version **0.2.0** (published 2021-02-14) · MIT license · 0 weekly downloads

## Install

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

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2021-02-14 |
| First published | 2020-02-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 27 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Alex Thomas |
| Maintainers | cawfree |
| Keywords | react, dark, night, mode, toggle, button |

## Links

- npm: https://www.npmjs.com/package/react-dark-mode-toggle
- Repository: https://github.com/cawfree/night-mode-toggle
- npm.io page: https://npm.io/package/react-dark-mode-toggle

## Dependencies (2)

- [parse-unit](https://npm.io/package/parse-unit.md) ^1.0.1
- [react-lottie-player](https://npm.io/package/react-lottie-player.md) ^1.1.1

## 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

- 0.2.0 (latest) — 2021-02-14
- 0.0.10 — 2020-10-02
- 0.0.9 — 2020-07-08
- 0.0.8 — 2020-07-08
- 0.0.7 — 2020-07-08
- 0.0.6 — 2020-07-01
- 0.0.5 — 2020-05-26
- 0.0.4 — 2020-05-13
- 0.0.3 — 2020-02-26
- 0.0.2 — 2020-02-18
- 0.0.1 — 2020-02-17

## README

# react-dark-mode-toggle

A super cutesy dark mode toggle button for [React](https://github.com/facebook/react). Inspired by [overreacted.io](https://overreacted.io/).

<a href="#badge">
    <img alt="code style: prettier" src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square"></a>

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

## 🚀 Getting Started

Using [`npm`]():

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

Using [`yarn`]():

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

## ✨ Usage

```javascript
import React, {useState} from "react";
import DarkModeToggle from "react-dark-mode-toggle";

export default () => {
  const [isDarkMode, setIsDarkMode] = useState(() => false);
  return (
    <DarkModeToggle
      onChange={setIsDarkMode}
      checked={isDarkMode}
      size={80}
    />
  );
};
```

## 📌 Props

Prop                  | Type     | Default                   | Required
--------------------- | -------- | ------------------------- | --------
`onChange`|func|`value => null`|No
`checked`|boolean|`false`|No
`size`|number (defaults to px) or string (px, em, rem, %, etc.)|`85`|No
`speed`|number|`1.3`|No
`className`|string|`null`|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).

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

<p align="center">
  <a href="https://www.buymeacoffee.com/cawfree">
    <img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy @cawfree a coffee" width="232" height="50" />
  </a>
</p>

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