Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
src
README.md
package.json

README.md

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).

License

MIT

You can’t perform that action at this time.