form

React hooks for forms state and validation

Dec 18, 2020
React hooks for forms state and validation

REACT COOL FORM

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

View Demo View Github

Features

Quick Start

To use React Cool Form, you must use [[email protected]](/cdn-cgi/l/email-protection) 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 does it rock:

Edit RCF - Quick start

import { useForm } from "react-cool-form"; const App = () => { const { form, getState } = 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), }); // React Cool Form filters the error of an un-blurred field by default (via the "filterUntouchedError" option) // Which helps the user focus on typing without being annoying const errors = getState("errors", { filterUntouchedError: true }); return ( <form ref={form} noValidate> <div> {/* Support built-in validation */} <input name="username" placeholder="Username" required /> {errors.username && <p>{errors.username}</p>} </div> <div> <input name="email" type="email" placeholder="Email" required /> {errors.email && <p>{errors.email}</p>} </div> <div> <input name="password" type="password" placeholder="Password" required minLength={6} /> {errors.password && <p>{errors.password}</p>} </div> <input type="submit" /> </form> ); };

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

Milestone

  • [x] Core features
  • [x] Type definition
  • [x] Support server-side rendering
  • [x] CI/CD
  • [ ] Unit testing (in-progress...)
  • [ ] Documentation (in-progress...)
  • [ ] Examples (in-progress...)
  • [ ] Logo design
  • [ ] End to end testing

GitHub

Recommended