useReactiveForm
Declarative React hook for gathering and validating form data without unnecessary re-renders.
Links:
1. Demo
2. NPM
3. GitHub
4. Medium
Install:
npm install use-reactive-form
yarn add use-reactive-form
Usage:
Step 1: Describe initial values and interface.
interface IFormData = {
user: string;
books: {
title: string;
author: string;
}[]
}
const fields: IFormData = {
user: '',
books: [
{
title: '',
author: '',
}
],
}Step 2: [Optional] Describe validation schema in Yup syntax.
import { array, object, string } from 'yup';
// ...
const schema = object().shape({
user: string().required('This field is required')
.max(20, 'Character limit exceeded'),
books: array().of(object().shape({
title: string().required('This field is required'),
author: string().required('This field is required'),
})),
});Step 3: Create config.
import { IUseReactiveForm } from 'use-reactive-form';
// ...
const config: IUseReactiveForm<IFormData> = {
fields,
schema,
validateOnChange: true
};Config keys:
{
fields: T; // Form fields / structure
deps?: any[]; // Array of dependencies that trigger re-render
schema?: any; // Validation schema
separator?: string; // Separator for name property of inputs. _ is set by default
validateOnChange?: boolean; // Validate on input change
actionOnChange?: (values: T) => void; // Fire function on input change
updateTriggers? string[]; // Array of name attributes whose change triggers re-render
}Step 4: Use Hook
const { values, ref, update, validate, clear } = useReactiveForm<IFormData>(config);
/**
values - object with current form state
ref - reference to <form> tag
errors - object of errors after validation
validate() - function which validates the form
clear() - function which clears form values form and errors
update() - function which re-renders form. It is needed when you dynamically add/remove fields.
**/Step 5: Connect hook to the form.
const onSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (validate()) {
console.log(values);
} else {
console.log(errors);
}
};
return (
<form ref={ref} onSubmit={onSubmit}>
<div>
<input type='text' name={'user'} defaultValue={values.name}/>
{ errors.user.error && <p> {errors.user.error} </p> }
</div>
{
values.books.map((b, i: number) => (
<div key={`book${i}`}>
<input type='text' name={`books_${i}_title`}/>
<input type='text' name={`books_${i}_author`}/>
</div>
))
}
<button type='submit' onClick={onSubmit}> Submit </button>
</form>
)Notice, that you have to describe name attribute as a path to the key in your form object.
Instead of common separators (., []) use _ or your separator described in config.
To get error message use errors. It is an object with the same structure as your
form object, but instead of just values, it contains object { value: string, error: string }.
Therefore, error message for user field located in errors.user.error.
Any action triggered on the <input/> will provide it with one of the following classes: touched, dirty or invalid.
Dynamic fields.
If you want to add some fields dynamically, you need to use update() function.
Let's say you want to add a new book. You will need to copy values and push a new book object to the values.books array.
const addBook = () => {
update({
...values,
books: [...values.books, {
title: '',
author: ''
}]
});
};
<button type='button' onClick={addBook}> Add book </button>Action on input change.
actionOnChange is a parameter, which you may want to set to true when you have to fire
a function when any of the inputs value changes. It may be desirable when you submit form dynamically.
