Top React Form and validation libraries
Tags: react, javascript, css, computerscience
Published: 2020-04-04 03:10:17


![Top React Form and validation libraries ](https://i1.wp.com/blogreact.com/wp-content/uploads/2020/03/forms.jpg?fit=750%2C393&ssl=1)

Form and validation libraries are one of the best way to avoid re writing the boring code again and again. In this post we will going to learn about top form and validation libraries for our React Projects.

## 1. [React-Formal](https://github.com/jquense/react-formal)

![React-Formal a React form and validation library](https://i0.wp.com/blogreact.com/wp-content/uploads/2020/03/0_-IgzkFtP7tau2rUL.png?fit=750%2C270&ssl=1)

React Formal is a library for quickly and painlessly handling HTML form validation and serialization. It tries to strike a balance between prescriptive form generators and libraries that require you to manually handle ever input and manage them in state.

React Formal, lets you build your form however you want with no restrictions on form markup, or unnecessary boilerplate. React Formal leverages a schema validation system, which offers helpful benefits over the traditional “validate the state DOM” approach.

-   Forms can be handled the “React Way”, with controlled or uncontrolled values, completely decoupled from DOM state.
-   Working against javascript objects instead of HTML representations of an objects, means no need for `<input type='hidden'/>`; only render inputs that a user actually needs to change!
-   Schema based validation, lets you reuse your parsing and model validation logic

**Installation**

```
npm install react-formal-inputs
```

```
npm install react-formal yup
```

## 2. [React-forms](https://github.com/prometheusresearch-archive/react-forms)

React Forms library provides a set of tools for [React](http://facebook.github.io/react/) to handle form rendering and validation. React Forms doesn’t provide any `<Form />` component, instead it makes implementing form components an easy task.

**Installation**

```
npm install react-forms@beta
```

**Example**

You can create a reusable component like below using React-forms.

```
import React from 'react'
import {Fieldset, Field, createValue} from 'react-forms'

class Form extends React.Component {

  constructor(props) {
    super(props)
    let formValue = createValue({
      value: props.value,
      onChange: this.onChange.bind(this)
    })
    this.state = {formValue}
  }

  onChange(formValue) {
    this.setState({formValue})
  }

  render() {
    return (
      <Fieldset formValue={this.state.formValue}>
        <Field select="firstName" label="First name" />
        <Field select="lastName" label="Last name" />
      </Fieldset>
    )
  }
}
```

You can use it like this

```
import {render} from 'react-dom'

render(
  <Form value={{firstName: 'Michael', lastName: 'Jackson'}} />,
  document.getElementById('form')
)
```

**For form validations**

```
let schema = {
  type: 'object',
  properties: {
    firstName: {type: 'string'},
    lastName: {type: 'string'}
  }
}
```

After creating above schema you can pass it to createValue function.

```
let formValue = createValue({value, onChange, schema})
```

## 3. [ValueLink](https://github.com/VoliJS/NestedLink)

![valueLink React form and validation](https://i0.wp.com/blogreact.com/wp-content/uploads/2020/03/0_F8KQ9OwyPOyu70-j.png?w=750&ssl=1)

ValueLink is lightweight (6.5K minified) and works on both JS and TypeScript. It provides call back solutions for complex forms along with input validation. This makes React state a perfect state container.

**Instillation**

```

npm install valuelink --save
```

**Example**

```
import { useLink } from 'valuelink'
import { MyInput } from './controls.jsx'

const coolState = { some : { name : '' } };
const MyCoolComponent = () => {
    // Digging through the object to get a link to the `coolState.some.name`
    const $name = useLink( coolState ).at( 'some' ).at( 'name' )
    
    // applying the validation rules
    $name.check( x => x.length > 0, 'Name is required' ),
         .check( x => x.length > 2, 'Name is too short' );
         .check( x => x.length < 20, 'Name is too long' );

    return (
        <MyInput $value={$name} />
    )
}

// controls.jsx
import * as React from 'react'

// Custom form field with validation taking the link to the `value`
const MyInput = ({ $value }) => (
    <div>
        <input {...$value.props} className={ $value.error ? 'error' : '' } />
        <span>{ $value.error || '' }</span>
    </div>
)
```

## 4. [Wingspan-forms](https://github.com/wingspan/wingspan-forms)

![Wingspan-forms](https://i2.wp.com/blogreact.com/wp-content/uploads/2020/03/Screenshot-from-2020-03-31-09-01-06.png?fit=750%2C322&ssl=1)

A dynamic form library for Facebook React, providing abstractions for building dynamic forms and controlled grids. Widgets provided by Telerik’s KendoUI.

**Installation**

```
npm install wingspan-forms
```

## 5. [NewForms](https://github.com/insin/newforms)

![NewForms react form and validations](https://i0.wp.com/blogreact.com/wp-content/uploads/2020/03/Screenshot-from-2020-03-31-09-03-38.png?w=750&ssl=1)

NewForms is an isomorphic form-handling library for React. It was formerly known as Django.forms.

NewForms defines new form objects instead of working on widgets. It can be served on the client-side by bundling it or can be deployed on the server-side.

**Installation**

```
npm install newforms
```

I hope you have learned about the React Form and validations using above 5 libraries.

[https://blogreact.com/](https://blogreact.com/)