wellyshen
Hi! friends, if this library has helped you out, please support us with a ⭐️
React hooks for forms state and validation, less code more performant.
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:
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-formHere'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):
 Welly 🤔 💻 📖 🚇 🚧 |
 Chris 🐛 |
This project follows the all-contributors specification. Contributions of any kind welcome!