/react-redux-form

Create forms easily in React with Redux.

Primary LanguageJavaScriptMIT LicenseMIT

React Redux Form

Build Status npm version

Read the Full Documentation

Or check out the wiki (available in the docs)!

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

Quick Start

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);