mirror of
https://github.com/cupcakearmy/use-light-switch.git
synced 2024-12-22 07:56:26 +00:00
53 lines
1.1 KiB
Markdown
Executable File
53 lines
1.1 KiB
Markdown
Executable File
# use-light-switch
|
|
|
|
|
|
|
|
|
|
|
|
**React hook for dark mode.**
|
|
|
|
## 🌈 Features
|
|
|
|
- Typescript compatible
|
|
- **0** Dependencies
|
|
- Tiny **~0.4kB**
|
|
- React Hooks
|
|
|
|
###### Installation
|
|
|
|
```
|
|
npm i use-light-switch
|
|
```
|
|
|
|
## 🤔 Motivation
|
|
|
|
There was no library that included typings 🤕
|
|
|
|
## 🚀 Quickstart
|
|
|
|
```typescript
|
|
import React from 'react'
|
|
import ReactDOM from 'react-dom'
|
|
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>
|
|
<p>Try switching your dark mode in macOS or Windows</p>
|
|
<div style={{
|
|
padding: '1em 2em',
|
|
backgroundColor: selected.color
|
|
}}>
|
|
{selected.name}
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
ReactDOM.render(<App />, window.document.getElementById('root'))
|
|
```
|