Reconform

Higher order component

config: {
  fields: {
    [fieldName: String]: {
      ?name: String // default: fieldName
      ?value: String | Array, // default: ''
      ?message: Node, // default: ''
      ?focused: Boolean, // default: false
      ?touched: Boolean, // default: false
      ?dirty: Boolean, // default: false
      ?valid: Boolean, // default: !Boolean(validator)
      ?validator: (value: String, props: Object) => Boolean | Node, // default: undefined
    }
  },
  submitting: Boolean, // default: false,
  onSubmit: (props: Object) => any // default: undefined
}

Usage example:

const enhance = withForm({
  fields: {
    username: {
      validator: (value, props) => value.length > 12 && 'Too Long Amigo',
    }
  }
  onSubmit: async (values, props) => {
    await props.someHandler(values);
    props.resetForm();
  }
});

const Form = enhance(({ fields, submitting, fieldEventHandlers, onSubmit }) =>
  <form onSubmit={onSubmit}>
    <label>
      <span>Username</span>
      <input name={fields.username.name} value={fields.username.value} {...fieldEventHandlers} />
    </label>
    {fields.username.touched && !fields.username.valid && <p>{fields.username.message}</p>}
    <button disabled={submitting}>Submit</button>
  </form>
)