Hello everyone, in this tutorial I'm going to show how to create forms easily using Createform package, I hope you find this article useful.
With the Createform library, creating and managing forms in React has never been easier. The library provides a simple and intuitive API for handling form submissions, validation, and more.
In this tutorial, we will go through the steps of creating and using a form hook with the Createform library. We will also cover how to validate form fields using the Yup library and how to display validation errors to the user.
Installation
To install Createform in your project, use npm or yarn:
npm install @createform/react
or
yarn add @createform/react
Repository: take a look at the GitHub repository
1. Creating the Form Hook
The first step in using Createform is to create a form hook. This can be done by calling the createForm function and passing in an object with an initialValues property. The initialValues property should contain an object with the keys and initial values of the fields in your form.
For example, the following code creates a useLoginForm hook with email and password fields:
const useLoginForm = createForm({
initialValues: {
email: '',
password: '',
},
});
Yeah, this approach look like zustand.
2. Using the Form Hook in a Form Component
Once you have created the form hook, you can use it in your form component. The hook provides several functions that you can use to manage the form, including handleSubmit, register, touched, and errors.
The register function should be used to register your form fields with the form. It takes the name of the field as an argument and should be passed as the ref prop of the form field element.
For example, the following code creates a login form that uses the useLoginForm hook:
const LoginForm = () => {
const { handleSubmit, register } = useLoginForm();
function onSubmit(values) {
console.log(values);
}
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input type="email" {...register('email')} />
<input type="password" {...register('password')} />
<button type="submit">Submit</button>
</form>
);
};
When the form is submitted, the onSubmit function will be called with an object containing the values of the email and password fields.
3. Validating Form Fields
You can also use validationSchema to validate the form field values before submitting the form.
const validationSchema = yup.object().shape({
email: yup.string().email().required(),
password: yup.string().min(6).required(),
});
const useLoginForm = createForm({
initialValues: {
email: '',
password: '',
},
validationSchema,
});
In this example, we are using the Yup library to create a validationSchema and passing it to the createForm function. It will validate the email field as required and with email format and the password field as required with a minimum of 6 characters.
In the form component:
const LoginForm = () => {
const { handleSubmit, register, errors, touched } = useLoginForm();
function onSubmit(values) {
console.log(values);
}
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input type="email" {...register('email')} />
{touched.email && <p>{errors.email}</p>}
<input type="password" {...register('password')} />
{touched.password && <p>{errors.password}</p>}
<button type="submit">Submit</button>
</form>
);
};
Note: You can also use Zod instead of Yup.
Conclusion
The Createform library has many others resources, and you can find them in the documentation, also the library provides a simple and intuitive way to create and manage forms in React. It allows you to easily register form fields, handle form submissions, and validate form field values. By using the validationSchema feature and libraries like Yup or Zod, you can easily implement validation for your forms and display errors to the user. With the Createform library, creating and managing forms in React becomes a breeze. You can also customize the form by adding additional form fields or custom validation logic.
Top comments (2)
Great tutorial on using the use-form library for creating and managing forms in React! The use-form library provides a simple and intuitive API for handling form submissions, validation, and more. It's also great to see that it allows for easy validation using libraries like Yup or Zod. Keep up the great work!
Thanks