useFormReducer
useFormReducer
is a custom hook that provides the ability to have controlled-forms without the hassle. It implements a reducer via react's useReducer
hook.
It abstracts several patterns involving controlled-forms:
-
handle change: pass a "state setter" to your form input
onChange
attribute and it updates the state without going through destructuring the event key + value with the state. - validation: validate an email field by default or pass custom validators to provide support for different field-type validation.
- error state: pass an error state setter to capture validation errors.
use
$ npm install useformreducer
use
Within the component that holds the form:
// import the package
import useFormReducer from 'useformreducer';
// set the form state hook
const [form, setForm] = useFormReducer();
// within the form element
<form>
...
<input
type="email"
value={form.email}
name="email"
onChange={setForm}
onBlur={setForm}
/>
...
</form>;
* Setting onBlur
provides specific validation when leaving the input field. An example of this logic is available within the included validator for reference. When using a validator, a passing the errorSetter
argument is recommended.
More info
- This may be obvioys but just-in-case, you can use the
form
state object to pass it in the body of your request.
Special thanks:
Shoutout to @stevekinney for sharing the cool trick of using reducers to simplify state management in a form, and avoid the use of the setState
hook. State Management in Pure React, v2
License
React is MIT licensed.