redux-forms
A simple form manager for Redux. Bindings available for React!
Packages
-
redux-forms -
redux-forms-react
Size
-
redux-formsalone is 7kb gzipped. -
redux-forms-reactis 10kb withredux-formsincluded!
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
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
