use-form-data
v1.1.0
Published
When creating forms with React, updating an object's values can be fiddly, this hook makes it easy.
Downloads
4
Readme
This hook aims to solve the issue of keeping values from forms in a useState
react state.
If you represent your form values in an object, then updating this object can be repetitive and fiddly, especially if you have multiple forms in your app.
Installation
npm install --save use-form-data
or
yarn add use-form-data
Usage
import useFormData from 'use-form-data';
const [formData, setFormData] = useFormData({name: '', email: '', password: ''});
return (
<form>
<input type="text" onChange={(e) => setFormData('name', e.target.value)} value={formData.name} />
<input type="email" onChange={(e) => setFormData('email', e.target.value)} value={formData.email} />
<input type="password" onChange={(e) => setFormData('password', e.target.value)} value={formData.password} />
</form>
);
If you want to completely overwrite the value of formData
then pass true
as the third parameter to setFormData
const [formData, setFormData] = useFormData({username: 'Bob', password: 'PaSsWoRd'});
// at this point formData = {name: 'Bob', password: 'PaSsWoRd'}
<button onClick={(e) => setFormData('', {username: 'Alice', password: 'banana'}, true)}>Press me</button>]
// after clicking the button, formData will be {username: 'Alice', password: 'banana'}