Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/robertkirsz/useform
A Hook for form handling
https://github.com/robertkirsz/useform
Last synced: 3 days ago
JSON representation
A Hook for form handling
- Host: GitHub
- URL: https://github.com/robertkirsz/useform
- Owner: robertkirsz
- License: mit
- Created: 2019-10-23T17:45:34.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2020-10-03T19:03:25.000Z (about 4 years ago)
- Last Synced: 2024-11-10T00:26:13.130Z (7 days ago)
- Language: JavaScript
- Size: 459 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README devtools.md
- License: LICENSE
Awesome Lists containing this project
README
# useForm
A React Hook for handling forms
```bash
npm install @robertkirsz/useform
```
##### Simplest usable example:
```js
import useForm from '@robertkirsz/useform'
function App() {
const form = useForm({
initialValues: { firstName: 'Kasia' },
onSubmit: values => { /* Do something with values */ }
})
return (
Submit
)
}
```
##### Validation:
```js
const form = useForm({
initialValues: { firstName: '' },
validators = { firstName: value => value === '' && 'Value required' }
})
```
##### Warnings:
```js
const form = useForm({
initialValues: { comment: '' },
warningValidators = { comment: value => value === '' && 'You sure you have nothing to say?' }
})
```
##### Setting values directly:
```js
form.setValue('firstName', 'Marzena')
```
##### Triggering validation programatically:
```js
form.validateField('firstName')
form.touchField('firstName')
```
We need to "touch" the field first, because "untouched" fields don't show validation statuses.
##### Setting validation errors directly:
```js
form.setError('firstName', 'Name must be "Marzenka"!')
form.touchField('firstName')
```
##### Showing that the form is submitting:
```js
{form.isSubmitting ? 'Submitting...' : 'Submit'}
```
##### Dev tools
You can import `UseFormDevTools` helper component that shows a preview of form values andd validation statuses in the lower-right corner of the window.
First, you need to wrap your app with `UseFormDevToolsContextProvider` and render `UseFormDevTools` inside of it.
```js
import UseFormDevTools, { UseFormDevToolsContextProvider } from '@robertkirsz/useform/devtools'
function App() {
return (
)
}
```
Components that use `useForm` must be inside the provider as well (they don't need to be called `YourComponents` of course).
Then you need to connect your forms to the provider:
```js
import useForm from '@robertkirsz/useform'
import { UseFormDevToolsContext } from '@robertkirsz/useform/devtools'
function App() {
const form = useForm({
initialValues: { firstName: 'Marzena' },
onSubmit: values => { /* Do something with values */ },
devToolsContext: UseFormDevToolsContext, // Here we connect the form to dev tools
name: 'My form' // Optional - if you have multiple forms, you can name them to differentiate them in dev tools
})
return (
Submit
)
}
```