A simple form manager for Redux with bindings for:
- React as
redux-forms-react
- Any library someone creates bindings for
API is similar to redux-form - another amazing form manager. The reason I created redux-forms
is to keep the library as small as possible and offer bindings for multiple UI libraries (even your own!).
redux-forms
alone is 6kb gzipped.redux-forms-react
is 9kb withredux-forms
included!
Dependencies
- Ramda
The build process includes babel-plugin-ramda
, so no unnecessary functions get into your bundle!
Simply:
yarn add redux-forms
Or for the oldschool:
npm i redux-forms --save
Then just install bindings for any UI library you prefer.
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);
Then simply wrap your desired form with the Form
component from your favorite UI library.
import { Form, Field } from 'redux-forms-react';
const MyForm = (props) => (
<Form name="contact">
<div>
<label htmlFor="name">Name</label>
<Field name="name">
<input type="text" />
</Field>
</div>
<div>
<label htmlFor="email">Email</label>
<Field name="email">
<input type="email" />
</Field>
</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 - there are examples for each use case.
There are essentially two major API differences:
- No
reduxForm
decorator, you rather wrap your form in aForm
component. Field
andFieldArray
don't takecomponent
prop, but supply the necessary properties directly to the children
There are many features missing, but that's intentional - I try to keep the library as lightweight as possible.