Мой опыт работы на самых популярных 7 древних библиотек React Form

$ npm install
react-hook-form

import React from 'react';
import { useForm } from 'react-hook-form';
 
function App() {
  const { register, handleSubmit, errors } = useForm(); // initialise the hook
  const onSubmit = (data) => {
    console.log(data);
  };
 
  return (
    

       {/* register an input */}
      
      
      {errors.lastname && 'Last name is required.'}
      
      
      {errors.age && 'Please enter number for age.'}
      
      
    
  );
}

$ npm install react-formal 
yup

var yup = require('yup')
  , Form = require('react-formal')
 
var modelSchema = yup.object({
        name: yup.object({
            first: yup.string().required('Name is required'),
            last: yup.string().required('Name is required')
        }),
        dateOfBirth: yup.date()
            .max(new Date(), 'You can be born in the future!')
    })
 
// ...in a component
render() {
    return (
        
 this.setState({ model })}
        >
            

                
Personal Details
 
                
                
 
                
                
 
                
                
            
            Submit
        
    )
}

$ npm install 
forms

var forms = require('forms');
var fields = forms.fields;
var validators = forms.validators;
 
var reg_form = forms.create({
    username: fields.string({ required: true }),
    password: fields.password({ required: validators.required('You definitely want a password') }),
    confirm:  fields.password({
        required: validators.required('don\'t you know your own password?'),
        validators: [validators.matchField('password')]
    }),
    email: fields.email()
});

$ npm install --save 
redux-form

import React from 'react'
import { Field, reduxForm } from 'redux-form'

const SimpleForm = (props) => {
  const { handleSubmit, pristine, reset, submitting } = props
  return (
    

      

        First Name
        

          
        
      
      

        Last Name
        

          
        
      
      

        Email
        

          
        
      
      

        Sex
        

           Male
           Female
        
      
      

        Favorite Color
        

          
            
            Red
            Green
            Blue
          
        
      
      

        Employed
        

          
        
      
      

        Notes
        

          
        
      
      

        Submit
        Clear Values
      
    
  )
}

export default reduxForm({
  form: 'simple'  // a unique identifier for this form
})(SimpleForm)

$ npm i 
react-form-builder2

var React = require('react');
var ReactDOM = require('react-dom');
var FormHandler = require('react-form-builder').Mixins.Handler;
var ExampleFormDef = {
  type: 'form',
  components: [
    {
      type: 'text-field',
      dataKey: 'example',
      displayName: 'Example'
    }
  ]
};

var Example = React.createClass({
  mixins: [FormHandler],
// using props
  getDefaultProps: function() {
    return {
      formDef: ExampleFormDef
    };
  },

  onSubmit: function(callback) {
    console.log("FormData: ", this.state.formData);
    callback();
  },

  render: this.renderForm();
});

ReactDOM.render(Example(), document.body);

$ npm install 
tcomb-form

import t from 'tcomb-form'

const FormSchema = t.struct({
  name: t.String,         // a required string
  age: t.maybe(t.Number), // an optional number
  rememberMe: t.Boolean   // a boolean
})

const App = React.createClass({

  onSubmit(evt) {
    evt.preventDefault()
    const value = this.refs.form.getValue()
    if (value) {
      console.log(value)
    }
  },

  render() {
    return (
      

        
        

          Save
        
      
    )
  }

})

$ npm install 
wingspan-forms

/** @jsx React.DOM */ 
'use strict';
var fieldInfos = {
        firstName: { dataType: 'text', label: 'First Name', name: 'firstName' },
        lastName: { dataType: 'text', label: 'Last Name', name: 'lastName' },
        gender: { dataType: 'enum', label: 'Gender', name: 'gender',
                  options: {
                      metadata: { idProperty: 'value', nameProperty: 'label'},
                      dataSource: [{ value: 'male', label: 'Male'}, { value: 'female', label: 'Female'}] }
                  },
        age: { dataType: 'number', label: 'Age', name: 'age' },
        birthday: { dataType: 'date', label: 'Birthday', name: 'birthday'}
    };

var MyForm = React.createClass({
    getInitialState: function () {
        return {
            firstName: '',
            lastName: '',
            gender: '',
            age: null,
            birthday: null
        };
    },
    render: function () {
        var controls = _.map(fieldInfos, function (fieldInfo) {
            return (
                
            );
        }.bind(this));
        return (
            

                
{controls}
                
{JSON.stringify(this.state, undefined, 2)}
            
        );
    },
    onFieldChange: function (fieldName, value) {
        this.setState(_.object([[fieldName, value]]));
    },
    isFieldValid: function (fieldName) {
        var val = this.state[fieldName];
        return val !== null && val !== ''
            ? [true, '']
            : [false, 'This field is required.'];
    }
});

var AutoField = WingspanForms.AutoField;
React.renderComponent(, document.body);
WingspanForms.ControlCommon.attachFormTooltips($(document.body));