use-light-switch/README.md

53 lines
1.1 KiB
Markdown
Raw Normal View History

2020-01-06 22:17:34 +00:00
# use-light-switch
![Version](https://badgen.net/npm/v/use-light-switch)
![Dependencies](https://badgen.net/david/dep/cupcakearmy/use-light-switch)
![Size Badge](https://badgen.net/bundlephobia/minzip/use-light-switch)
**React hook for dark mode.**
## 🌈 Features
- Typescript compatible
- **0** Dependencies
- Tiny **~0.7kB**
- React Hooks
###### Installation
```
npm i use-light-switch
```
## 🤔 Motivation
There was no library with typings 🤕
## 🚀 Quickstart
```typescript
2020-01-06 22:18:38 +00:00
import React from 'react'
2020-01-06 22:17:34 +00:00
import ReactDOM from 'react-dom'
2020-01-06 22:18:38 +00:00
import { useModeSelector } from 'use-light-switch'
const App: React.FC = () => {
const selected = useModeSelector({
light: { color: 'green', name: 'Light' },
dark: { color: 'red', name: 'Dark' },
unset: { color: 'blue', name: 'Unset' },
})
return <div>
<h3>Selector</h3>
<div style={{
padding: '1em 2em',
backgroundColor: selected.color
}}>
{selected.name}
</div>
2020-01-06 22:17:34 +00:00
</div>
}
2020-01-06 22:18:38 +00:00
ReactDOM.render(<App />, window.document.getElementById('root'))
2020-01-06 22:17:34 +00:00
```