Building Forms in React Can Be a Piece of Cake 🧁  by@welly

Building Forms in React Can Be a Piece of Cake 🧁

image
welly HackerNoon profile picture

welly

Code x Design ✨

twitter social icongithub social iconlinkedin social iconfacebook social icon

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 👊🏻.

Let's Getting Started

We're going to build a basic signup form with validation as below:

image

To use React Cool Form, you must use [email protected] 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 implementation, you can play it via CodeSandbox:

With React Cool Form, we can also integrate a 3rd-party UI library with our form seamlessly. We take Material-UI as an example:

✨ Pretty easy right? Check the full API documentation to learn more about it.

react to story with heart
react to story with light
react to story with boat
react to story with money
L O A D I N G
. . . comments & more!