mirror of
https://github.com/cupcakearmy/use-light-switch.git
synced 2024-12-21 23:46:26 +00:00
Merge branch 'master' of https://github.com/cupcakearmy/use-light-switch
This commit is contained in:
commit
54f523dea2
93
README.md
93
README.md
@ -10,7 +10,7 @@
|
||||
|
||||
- Typescript compatible
|
||||
- **0** Dependencies
|
||||
- Tiny **~0.7kB**
|
||||
- Tiny **~0.4kB**
|
||||
- React Hooks
|
||||
|
||||
###### Installation
|
||||
@ -19,9 +19,11 @@
|
||||
npm i use-light-switch
|
||||
```
|
||||
|
||||
## 💻 [Live Example](https://codesandbox.io/s/simple-wbpgp)
|
||||
|
||||
## 🤔 Motivation
|
||||
|
||||
There was no library with typings 🤕
|
||||
There was no library that included typings 🤕
|
||||
|
||||
## 🚀 Quickstart
|
||||
|
||||
@ -38,7 +40,7 @@ const App: React.FC = () => {
|
||||
})
|
||||
|
||||
return <div>
|
||||
<h3>Selector</h3>
|
||||
<p>Try switching your dark mode in macOS or Windows</p>
|
||||
<div style={{
|
||||
padding: '1em 2em',
|
||||
backgroundColor: selected.color
|
||||
@ -50,3 +52,88 @@ const App: React.FC = () => {
|
||||
|
||||
ReactDOM.render(<App />, window.document.getElementById('root'))
|
||||
```
|
||||
|
||||
## 📒 Reference
|
||||
|
||||
### `useLightSwitch()`
|
||||
|
||||
This is the most basic react hook. It returns one of 3 [Modes](#mode)
|
||||
|
||||
###### Example
|
||||
|
||||
```typescript
|
||||
import { Mode, useLightSwitch } from 'use-light-switch'
|
||||
|
||||
|
||||
const Simple: React.FC = () => {
|
||||
const mode = useLightSwitch()
|
||||
|
||||
if (mode === Mode.Dark) ...
|
||||
|
||||
return ...
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### Mode
|
||||
|
||||
A simple enum. Possible values are:
|
||||
|
||||
- `Mode.Light`
|
||||
- `Mode.Dark`
|
||||
- `Mode.Unset`
|
||||
|
||||
`Unset` is returned when the user has no explicit preference. This is often the case with older or if it's simply unsupported.
|
||||
|
||||
### `useModeSelector(options)`
|
||||
|
||||
This is a handy hook that reduces boilerplate. You pass values for the different modes and the hook will choose accordingly to what is currently selected. uses [`modeSelector`](#modeselectormode-options) under the hood.
|
||||
|
||||
###### Example
|
||||
|
||||
```typescript
|
||||
import { useModeSelector } from 'use-light-switch'
|
||||
|
||||
const WithSelector: 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>
|
||||
</div>
|
||||
}
|
||||
```
|
||||
|
||||
All parameters are optional and typesafe.
|
||||
|
||||
### `modeSelector(mode, options)`
|
||||
|
||||
This is a simple functions that returns the matched option to the mode.
|
||||
|
||||
###### Example
|
||||
|
||||
```typescript
|
||||
import { Mode, modeSelector } from 'use-light-switch'
|
||||
|
||||
const selected = modeSelector(
|
||||
Mode.Dark,
|
||||
{
|
||||
light: { color: 'green', name: 'Light' },
|
||||
dark: { color: 'red', name: 'Dark' },
|
||||
unset: { color: 'blue', name: 'Unset' },
|
||||
}
|
||||
)
|
||||
|
||||
selected.color // red
|
||||
selected.name // Dark
|
||||
```
|
||||
|
Loading…
Reference in New Issue
Block a user