easy-form v1.8.0

Easy Form

Easy Form is a React HOC that allow you to build forms easily and flexibly.

Example

Demo

Features

• easy: manage form state conveniently
• flexible: create awesome form easily with Material-UI, Ant-Design, Redux or any library you like.
• powerful: support sync/async validation both.
• tiny: only 19.7kb ungzipped.

Get Started

1. Run yarn add easy-form react react-dom prop-types

2. Render it!

import React from 'react';
import { ValidationField, createForm } from '../src';

const schema = {
  name: {
    validator: name =>
      new Promise((res, rej) => {
        setTimeout(() => {
          if (name) {
            res(name);
          } else {
            rej(name);
          }
        }, 200);
      }),
    message: 'Please input your username',
  },
  password: {
    validator: password => password,
    message: 'Please input your password',
  },
};

class LoginForm extends React.PureComponent {
  handleSubmit = e => {
    e.preventDefault();
    const { submit } = this.props;
    submit(data => console.log(data), error => console.log(error))();
  };
  render() {
    const { isValid } = this.props;
    return (
      <form onSubmit={this.handleSubmit}>
        <ValidationField name="name" label="Username">
          <input placeholder="Username" />
        </ValidationField>
        <ValidationField name="password" label="Password">
          <input placeholder="Password" />
        </ValidationField>
        <button
          style={{
            display: 'inline-block',
            marginLeft: 180,
          }}
          disabled={!isValid}
          type="submit">
          Login
        </button>
      </form>
    );
  }
}

export default createForm({}, schema)(LoginForm);

Apis

createForm(defaultValues, schema, options)

usage:

const schema = {
  birth: {
    validator: date => (date ? true : false),
    message: 'Please input your date of birth',
  },
  description: [
    {
      validator: description => (description ? true : false),
      message: 'Please input your description',
    },
    {
      validator(date) {
        return new Promise((res, rej) => {
          setTimeout(() => {
            date === 'loading' ? res(date) : rej(date);
          }, 0);
        });
      },
      message: name => `"${name}" is not my name!`,
    },
  ],
};
const DecoratedForm = createForm(
  {
    birth: '2018-05-28',
  },
  schema,
  { fieldRender },
)(CustomizedForm);

defaultValues: Object

Default values of the form.

schema: Object<[field: string]: Validator>

validator: (target: any, values: Object, preValues: Object, customOptions: Object) => bool | Promise

The validation rules of the form. You pass an array to customize more than one validators. And the validators will be executed sequentially. If validation passes, it should return true or a resolved promise. Else, it should return false or a rejected promise. The message should be a string or a function that receives value of input and result of validation and returns a string.

options: Object

If the form has been decorated by createForm then it owns APIs as follows:

ValidationField