## Features
- 🎣 [Easy to use](https://react-cool-form.netlify.app/docs/getting-started/integration-an-existing-form), React Cool Form is [a set of React hooks](https://react-cool-form.netlify.app/docs/api-reference/use-form) that helps you conquer all kinds of forms.
- 🗃 Manages [dynamic](https://react-cool-form.netlify.app/docs/examples/conditional-fields) and [complex](https://react-cool-form.netlify.app/docs/getting-started/complex-structures) form data without hassle.
- 🪄 Manages [arrays and lists](https://react-cool-form.netlify.app/docs/getting-started/arrays-and-lists) data like a master.
- 🚦 Supports [built-in](https://react-cool-form.netlify.app/docs/getting-started/validation-guide#built-in-validation), [form-level](https://react-cool-form.netlify.app/docs/getting-started/validation-guide#form-level-validation), and [field-level](https://react-cool-form.netlify.app/docs/getting-started/validation-guide#field-level-validation) validation.
- 🚀 Highly performant, [minimizes the number of re-renders](https://react-cool-form.netlify.app#performance-matters) for you.
- 🧱 Seamless integration with existing HTML form inputs or [3rd-party UI libraries](https://react-cool-form.netlify.app/docs/getting-started/3rd-party-ui-libraries).
- 🎛 Super flexible [API](https://react-cool-form.netlify.app/docs/api-reference/use-form) design, built with [DX and UX](https://react-cool-form.netlify.app/docs) in mind.
- 🔩 Provides useful [utility functions](https://react-cool-form.netlify.app/docs/api-reference/utility-functions) to boost forms development.
- 📜 Supports [TypeScript](https://react-cool-form.netlify.app/docs/getting-started/typescript-support) type definition.
- ☁️ Server-side rendering compatibility.
- 🦔 A [tiny size](https://react-cool-form.netlify.app/docs/getting-started/bundle-size-overview) ([~ 7.1kB gizpped](https://bundlephobia.com/result?p=react-cool-form)) library but powerful.
## [Docs](https://react-cool-form.netlify.app)
See the documentation at [react-cool-form.netlify.app](https://react-cool-form.netlify.app) for more information about using React Cool Form!
Frequently viewed docs:
- [Getting Started](https://react-cool-form.netlify.app/docs)
- [Examples](https://react-cool-form.netlify.app/docs/examples/basic)
- [API Reference](https://react-cool-form.netlify.app/docs/api-reference/use-form)
## 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](https://www.npmjs.com/package/react-cool-form).
```sh
$ yarn add react-cool-form
# or
$ npm install --save react-cool-form
```
Here's the basic concept of how it rocks:
[](https://codesandbox.io/s/rcf-quick-start-j8p1l?fontsize=14&hidenavigation=1&theme=dark)
```js
import { useForm } from "react-cool-form";
const Field = ({ label, id, error, ...rest }) => (
{error &&
{error}
}
);
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 (
);
};
```
✨ Pretty easy right? React Cool Form is more powerful than you think. Let's [explore it](https://react-cool-form.netlify.app) 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](https://react.statuscode.com/issues/245).
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
