When creating forms with React, updating an object's values can be fiddly, this hook makes it easy.

Usage no npm install needed!

<script type="module">
  import useFormData from '';


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.



npm install --save use-form-data


yarn add use-form-data


import useFormData from 'use-form-data';

const [formData, setFormData] = useFormData({name: '', email: '', password: ''});

return (
        <input type="text" onChange={(e) => setFormData('name',} value={} />
        <input type="email" onChange={(e) => setFormData('email',} value={} />
        <input type="password" onChange={(e) => setFormData('password',} value={formData.password} />

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'}