Features

• 🎣 Easy to use, React Cool Form is a set of React hooks that helps you conquer all kinds of forms.
• 🗃 Manages dynamic and 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.1kB gizpped) library but powerful.

Docs

See the documentation at react-cool-form.netlify.app for more information about using React Cool Form!

Frequently viewed docs:

• Getting Started
• Examples
• API Reference

Quick Start

To use React Cool Form, you must use [email protected] 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, use } = useForm({
    // (Strongly advise) Provide the default values
    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 = use("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={8}
        error={errors.password}
      />
      <input type="submit" />
    </form>
  );
};

✨ Pretty easy right? React Cool Form is more powerful than you think. Let's explore it now!

Articles / Blog Posts

💡 If you have written any blog post or article about React Cool Form, please open a PR to add it here.

• Featured on React Status #245.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!