React-define-form NPM

React Define Form

React define form offers alternative typescript bindings for react-final-form. It requires you to "define" a form type, specifying the type of the form data.

Installation

yarn add react-define-form

Usage

import * as React from 'react';
import defineForm from 'react-define-form';

const { Form, Fields } = defineForm(f => ({
  name: f<string>(),
  bio: f<string>(),
  phone: f<string>()
}));

const MyForm = () => (
  <Form
    initialValues={{ name: '', bio: '', phone: '' }}
    onSubmit={values => {
      console.log(values);
    }}
    validate={values => {
      return {};
    }}
    render={({ handleSubmit, pristine, invalid }) => (
      <form onSubmit={handleSubmit}>
        <h2>Simple Default Input</h2>
        <div>
          <label>First Name</label>
          <Fields.name component="input" />
        </div>

        <h2>Render Function</h2>
        <Fields.bio
          render={({ input, meta }) => (
            <div>
              <label>Bio</label>
              <textarea {...input} />
              {meta.touched && meta.error && <span>{meta.error}</span>}
            </div>
          )}
        />

        <h2>Render Function as Children</h2>
        <Fields.phone>
          {({ input, meta }) => (
            <div>
              <label>Phone</label>
              <input type="text" {...input} placeholder="Phone" />
              {meta.touched && meta.error && <span>{meta.error}</span>}
            </div>
          )}
        </Fields.phone>

        <button type="submit" disabled={pristine || invalid}>
          Submit
        </button>
      </form>
    )}
  />
);

export default MyForm;

For full API docs, you can look at react-final-form. The API for Form and Fields.SOME_FIELD_NAME in this module exactly match those of Form, Field and FormSpy in react-final-form, except that for Field, name is already set for you and this module does not support parse/format/allowNulls (null and undefined are not special cased and you should use the empty string directly instead).