A versatile, fast, and intuitive library for creating complex and performant forms in React and Redux.
Install the dependencies (you probably already have these):
npm install react react-dom redux react-redux redux-thunk --save
Install React Redux Form:
npm install react-redux-form@latest --save
Get started:
Quick Start Guide
import { createStore } from 'redux';
import { combineForms } from 'react-redux-form';
const initialUser = {
firstName: '',
lastName: '',
};
export const store = createStore(combineForms({
user: initialUser,
}));
import React from 'react';
import { Form, Control } from 'react-redux-form';
class MyForm extends React.Component {
handleSubmit(values) {
// Do anything you want with the form value
console.log(values);
}
render() {
return (
<Form
model="user"
onSubmit={(val) => this.handleSubmit(val)}
>
<label>Your name?</label>
<Control.text model="user.name" />
<label>
<Control.checkbox model="user.remember" />
Remember me
</label>
<button>Submit!</button>
</Form>
);
}
}
// No need to connect()!
export default MyForm;
import React from 'react';
import { Form, Control } from 'react-redux-form';
class MyForm extends React.Component {
render() {
return (
<Form model="user">
<label>Username</label>
<Control.text
model="user.username"
validators={{
required: (val) => !!val.length,
minLength: (val) => val.length > 8,
}}
/>
<Errors
model="user.username"
messages={{
required: 'Username is required.',
minLength: 'Username must be more than 8 characters.',
}}
/>
<button>Submit!</button>
</Form>
);
}
}
// No need to connect()!
export default MyForm;