React Redux Form is a collection of reducer creators and action creators that make implementing even the most complex and custom forms with React and Redux simple and performant.
npm install react-redux-form --save
Be sure to read the step-by-step guide in the documentation.
import React from 'react';
import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import { createModelReducer, createFormReducer } from 'react-redux-form';
import MyForm from './components/my-form-component';
const store = createStore(combineReducers({
user: createModelReducer('user', { name: '' }),
userForm: createFormReducer('user')
};
class App extends React.Component {
render() {
return (
<Provider store={ store }>
<MyForm />
</Provider>
);
}
}
// ./components/my-form-component.js'
import React from 'react';
import { connect } from 'react-redux';
import { Field } from 'react-redux-form';
class MyForm extends React.Component {
render() {
let { user } = this.props;
return (
<form>
<h1>Hello, { user.name }!</h1>
<Field model="user.name">
<input type="text" />
</Field>
</form>
);
}
}
export default connect(state => ({ user: state.user }))(MyForm);
- -
Deep states for form and model reducers - - React Native support
- - Support for
<input type="file" />
- - Automatic model resetting for
<input type="reset" />
- - Support for
<input type="range" />
- - Support for
<input type="color" />
- - Support for
<progress />
- - Potential
<FieldSet />
component for grouping fields?