mirror of
https://github.com/cupcakearmy/use-light-switch.git
synced 2024-12-22 07:56:26 +00:00
Update README.md
This commit is contained in:
parent
c9c90ae5d2
commit
13ebd40b29
36
README.md
36
README.md
@ -26,29 +26,27 @@ There was no library with typings 🤕
|
|||||||
## 🚀 Quickstart
|
## 🚀 Quickstart
|
||||||
|
|
||||||
```typescript
|
```typescript
|
||||||
|
import React from 'react'
|
||||||
import ReactDOM from 'react-dom'
|
import ReactDOM from 'react-dom'
|
||||||
import { useForm } from 'formhero'
|
import { useModeSelector } from 'use-light-switch'
|
||||||
|
|
||||||
const Form = () => {
|
const App: React.FC = () => {
|
||||||
const { field, form } = useForm({
|
const selected = useModeSelector({
|
||||||
username: '',
|
light: { color: 'green', name: 'Light' },
|
||||||
password: '',
|
dark: { color: 'red', name: 'Dark' },
|
||||||
|
unset: { color: 'blue', name: 'Unset' },
|
||||||
})
|
})
|
||||||
|
|
||||||
const _submit = (e: React.FormEvent) => {
|
return <div>
|
||||||
e.preventDefault()
|
<h3>Selector</h3>
|
||||||
console.log(form)
|
<div style={{
|
||||||
}
|
padding: '1em 2em',
|
||||||
|
backgroundColor: selected.color
|
||||||
return (
|
}}>
|
||||||
<div>
|
{selected.name}
|
||||||
<form onSubmit={_submit}>
|
</div>
|
||||||
<input {...field('username')} />
|
|
||||||
<input {...field('password')} />
|
|
||||||
|
|
||||||
<button type="submit">Go 🚀</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ReactDOM.render(<App />, window.document.getElementById('root'))
|
||||||
```
|
```
|
||||||
|
Loading…
Reference in New Issue
Block a user