✨ Introducing react-cool-form: React hooks for forms state and validation, less code more performant

#react #hook #forms #opensource

Building forms in React might be a challenge. We have to face many tedious things like form data, validation, submission, and more 🤯.

As a React developer, there're two strategies for implementing forms, the controlled components and uncontrolled components, each has its advantages and timing of use. The controlled components serve form state as the single source of truth. However, the uncontrolled components make our code more concise and performant.

React Cool Form combines these advantages and references the UX research of Nielsen Norman Group as the basis for our API design to help you conquer all kinds of forms 👊🏻.

Features

🎣 Easy to use, React Cool Form is a set of React hooks that helps you conquer all kinds of forms.
🗃 Manages complex form data without hassle.
🪄 Manages arrays and lists data like a master.
🚦 Supports built-in, form-level, and field-level validation.
🚀 Highly performant, minimizes the number of re-renders for you.
🧱 Seamless integration with existing HTML form inputs or 3rd-party UI libraries.
🎛 Super flexible API design, built with DX and UX in mind.
🔩 Provides useful utility functions to boost forms development.
📜 Supports TypeScript type definition.
☁️ Server-side rendering compatibility.
🦔 A tiny size (~ 7.2kB gizpped) library but powerful.

Quick Start

To use React Cool Form, you must use react@16.8.0 or greater which includes hooks. This package is distributed via npm.

$ yarn add react-cool-form
# or
$ npm install --save react-cool-form

Here's the basic concept of how it rocks:

import { useForm } from "react-cool-form";

const Field = ({ label, id, error, ...rest }) => (
  <div>
    <label htmlFor={id}>{label}</label>
    <input id={id} {...rest} />
    {error && <p>{error}</p>}
  </div>
);

const App = () => {
  const { form, mon } = useForm({
    // (Strongly advise) Provide the default values just like we use React state
    defaultValues: { username: "", email: "", password: "" },
    // The event only triggered when the form is valid
    onSubmit: (values) => console.log("onSubmit: ", values),
  });
  // We can enable the "errorWithTouched" option to filter the error of an un-blurred field
  // Which helps the user focus on typing without being annoyed by the error message
  const errors = mon("errors", { errorWithTouched: true }); // Default is "false"

  return (
    <form ref={form} noValidate>
      <Field
        label="Username"
        id="username"
        name="username"
        // Support built-in validation
        required
        error={errors.username}
      />
      <Field
        label="Email"
        id="email"
        name="email"
        type="email"
        required
        error={errors.email}
      />
      <Field
        label="Password"
        id="password"
        name="password"
        type="password"
        required
        minLength={6}
        error={errors.password}
      />
      <input type="submit" />
    </form>
  );
};