react-perfect-dark-mode
Version:
Perfect dark mode.
41 lines (31 loc) • 1.29 kB
Markdown
# `react-perfect-dark-mode`
[](https://www.npmjs.com/package/react-perfect-dark-mode)
[](https://bundlephobia.com/result?p=react-perfect-dark-mode)
- [Example](https://react-perfect-dark-mode-example.netlify.app/)
- [Example Code](https://github.com/DylanVann/perfect-dark-mode/tree/main/examples/react-perfect-dark-mode-example)
## Installation
You must first install [`perfect-dark-mode`](https://github.com/DylanVann/perfect-dark-mode/tree/main/packages/perfect-dark-mode) into the `<head>` of your document.
```bash
yarn add react-perfect-dark-mode
```
## Usage
In a component you can use the hook:
```jsx
import React from 'react'
import { usePerfectDarkMode } from 'react-perfect-dark-mode'
export const Toggle = () => {
const { mode, updateMode } = usePerfectDarkMode()
return (
<button
style={{ visibility: mode !== undefined ? 'visible' : 'hidden' }}
onClick={() =>
updateMode(
(mode, modes, modeIndex) => modes[(modeIndex + 1) % modes.length],
)
}
>
{mode}
</button>
)
}
```