Skip to main content

Getting Started

Building forms in React might be a challenge. We have to face many tedious things like form data, validation, submission, and more ๐Ÿคฏ.

As a React developer, there're two strategies for implementing forms, the controlled components and uncontrolled components, each has its advantages and timing of use. The controlled components serve form state as the single source of truth. However, the uncontrolled components make our code more concise and performant.

React Cool Form combines these advantages and references the UX research of Nielsen Norman Group as the basis for our API design to help you conquer all kinds of forms ๐Ÿ‘Š๐Ÿป.

Requirement#

To use React Cool Form, you must use react@16.8.0 or greater which includes hooks.

Installation#

This package is distributed via npm.

$ npm install --save react-cool-form
info

React Cool Form supports all major browsers. For older browsers (e.g. IE11) without the async/await, Promise, and ES6+ features, you'll need to include a polyfill such as core-js.

CDN#

If you're not using a module bundler or package manager. We also provide a UMD build which is available over the unpkg.com CDN. Simply use a <script> tag to add it after React CND links as below:

<script crossorigin src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<!-- react-cool-form comes here -->
<script crossorigin src="https://unpkg.com/react-cool-form/dist/index.umd.production.min.js"></script>

Then you can access it via the window.ReactCoolForm.<moduleName> variables.

Example#

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, 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 keep exploring!