redux-forms

A simple form manager for Redux. Bindings available for React!

Packages

• redux-forms
• redux-forms-react

Size

• redux-forms alone is 7kb gzipped.
• redux-forms-react is 10kb with redux-forms included!

Dependencies

• Ramda

The build process includes babel-plugin-ramda, so no unnecessary functions get into your bundle!

Installation

Simply:

yarn add redux-forms

Or:

npm i redux-forms --save

Then just install bindings for any UI library you prefer.

Quickstart

Mount the redux-forms reducer to your root reducer as reduxForms.

import { createStore, combineReducers } from 'redux';
import reduxFormsReducer from 'redux-forms';

const rootReducer = combineReducers({
  // ... your other reducers
  reduxForms: reduxFormsReducer,
});

const store = createStore(rootReducer);

Create a component wrapped in the field decorator.

import { field } from 'redux-forms-react';

const Input = props => (
  <input type="text" {...props.input} />
);

export default field(Input);

Then simply wrap your desired form with the Form component and you're ready to go!

import { Form } from 'redux-forms-react';

import Input from './Input';

const MyForm = props => (
  <Form name="contact">
    <div>
      <label htmlFor="name">Name</label>
      <Input name="name" />
    </div>
    <div>
      <label htmlFor="email">Email</label>
      <Input name="email" />
    </div>
    <button type="submit">Submit</button>
  </Form>
);

export default MyForm;

That's it! This is how you mount the most basic form. For more advanced usage, check out the API docs below.

Documentation

• reducer
• Form
• field
• fieldArray
• selectors
• actions

Migrating from 0.11.x

The API in redux-forms-react for Field and FieldArray changed from the 0.11.x version. The reasons are:

• less magic with supplied props
• better type support in both TypeScript and Flow
• easier unit testing
• less overhead with imports

Field -> field

The Field higher order component changed to a field decorator.

Note: native components are no longer supported, you have to provide a regular component.

This is how you upgrade your fields:

Before:

// Input.js
const Input = props => (
  <input type="text" {...props.input} />
);

export default Input;

// MyForm.js
const MyForm = props => (
  <Form name="contact">
    <div>
      <label htmlFor="name">Name</label>
      <Field name="name">
        <Input />
      </Field>
    </div>
    <button type="submit">Submit</button>
  </Form>
);

After:

// Input.js
const Input = props => (
  <input type="text" {...props.input} />
);

export default field(Input);

// MyForm.js
const MyForm = props => (
  <Form name="contact">
    <div>
      <label htmlFor="name">Name</label>
      <InputField name="name" />
    </div>
    <button type="submit">Submit</button>
  </Form>
);

FieldArray -> fieldArray

The FieldArray higher order component changed to a fieldArray decorator.

This is how you upgrade your field arrays:

Before:

// Inputs.js
const Inputs = props => (
  <div className="Inputs">
    {props.fields.map(id => (
      <Field key={id} name={id}>
        <Input />
      </Field>
    ))}
    <button className="Inputs-btn" onClick={props.fields.push}>
      Add field
    </button>
  </div>
);

export default Inputs;

// MyForm.js
const MyForm = props => (
  <Form name="contact">
    <FieldArray name="name">
      <Inputs />
    </FieldArray>
    <button type="submit">Submit</button>
  </Form>
);

After:

// Inputs.js
const Inputs = props => (
  <div className="Inputs">
    {props.fields.map(id => (
      <InputField key={id} name={id} />
    ))}
    <button className="Inputs-btn" onClick={props.fields.push}>
      Add field
    </button>
  </div>
);

export default fieldArray(Inputs);

// MyForm.js
const MyForm = props => (
  <Form name="contact">
    <InputsArray name="name" />
    <button type="submit">Submit</button>
  </Form>
);

License

MIT