React hooks for forms state and validation, less code more performant.
See the documentation at react-cool-form.netlify.app for more information about using React Cool Form!
Frequently viewed docs:
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 does it rock:
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!
Author: wellyshen
Demo: https://react-cool-form.netlify.app/
Source Code: https://github.com/wellyshen/react-cool-form
#react #reactjs #javascript