DEV Community

Cover image for The ultimate form library for react you'll ever need
Jucian0
Jucian0

Posted on • Edited on

The ultimate form library for react you'll ever need

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.

Get in touch with me on Twitter

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
Enter fullscreen mode Exit fullscreen mode

or

yarn add @createform/react
Enter fullscreen mode Exit fullscreen mode

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: '',
  },
});
Enter fullscreen mode Exit fullscreen mode

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>
  );
};
Enter fullscreen mode Exit fullscreen mode

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,
});
Enter fullscreen mode Exit fullscreen mode

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>
  );
};
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
elliot_brenya profile image
Elliot Brenya sarfo

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!

Collapse
 
jucian0 profile image
Jucian0

Thanks