mirror of
https://github.com/cupcakearmy/formhero.git
synced 2024-12-22 16:16:24 +00:00
Update README.md
This commit is contained in:
parent
c6a269519e
commit
74abea76c9
89
README.md
89
README.md
@ -291,3 +291,92 @@ export default () => {
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
### Auto
|
||||
|
||||
The `auto` object is used to bind the form state to the input.
|
||||
|
||||
|
||||
###### Example: Simple
|
||||
|
||||
```javascript
|
||||
const { auto } = useForm()
|
||||
|
||||
<input {...auto('username')} />
|
||||
```
|
||||
|
||||
|
||||
###### Example: With custom options
|
||||
|
||||
All are optional.
|
||||
|
||||
```javascript
|
||||
const { auto } = useForm()
|
||||
|
||||
<input {...auto('username', {
|
||||
getter: 'onChage',
|
||||
setter: 'value',
|
||||
extractor: (e) => e.target.value
|
||||
})} />
|
||||
```
|
||||
|
||||
## Form
|
||||
|
||||
This is the form state that you can use when submitting the data
|
||||
|
||||
###### Example
|
||||
|
||||
```javascript
|
||||
|
||||
const { form } = useForm(...);
|
||||
|
||||
// ...
|
||||
|
||||
<form onSubmit={()=> console.log(form)}>
|
||||
// ...
|
||||
</form>
|
||||
```
|
||||
|
||||
## Errors
|
||||
|
||||
This object contains the error messages if a field is not valid.
|
||||
The error message can be specified by you, otherwise it will return `Error in ${field}`
|
||||
|
||||
###### Example
|
||||
|
||||
```javascript
|
||||
const { errors } = useForm(...)
|
||||
|
||||
//...
|
||||
|
||||
{errors.username}
|
||||
{errors.password}
|
||||
```
|
||||
|
||||
###### isValid
|
||||
|
||||
`isValid` is a little simple helper that checks whether the `error` object is clear or if there are errors left.
|
||||
|
||||
## Update
|
||||
|
||||
The `update` function allows you to manually change and assign the state of the form. This can be usefull when you want to reset a field or the whole form. The input must have the same type as the initial state.
|
||||
|
||||
###### Example
|
||||
|
||||
```javascript
|
||||
const { form, update } = useForm(...)
|
||||
|
||||
const resetUsername = () => {
|
||||
update({
|
||||
...form,
|
||||
username: '',
|
||||
})
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
update({
|
||||
username: '',
|
||||
password: '',
|
||||
})
|
||||
}
|
||||
```
|
||||
|
Loading…
Reference in New Issue
Block a user