react-cool-form

React hooks for forms state and validation, less code more performant.


Keywords
react, hooks, form, forms, form-builder, form-state, form-validation, state, state-management, validation, uncontrolled, controlled, arrays, lists, dx, ux, performance, react-hooks, asynchronous, typescript
License
MIT
Install
npm install react-cool-form@0.4.1

Documentation

React Cool Form

React hooks for forms state and validation, less code more performant.

npm version npm downloads npm bundle size coverage status netlify deploy

Features

Docs

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

Frequently viewed docs:

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:

Edit RCF - Quick start

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, select } = 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 = select("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>
  );
};

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