react-redux-form 0,0,41,4,5,0,4 editorconfig eslint travis-ci npm

Create forms easily in React with Redux.

2 years after MIT

React Redux Form

Join the chat at https://gitter.im/react-redux-form/Lobby Build Status npm version CDNJS

Read the Documentation

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 [email protected] --save

Installation

# Dependencies (you probably already have these)
npm install react react-dom redux react-redux --save

# version 1.x.x
npm install [email protected] --save

Zero-Boilerplate <LocalForm>

If you want to get up and running with forms quickly without having to set up Redux, just use Local Forms:

import React from 'react';
import { LocalForm, Control } from 'react-redux-form';

export default class MyApp extends React.Component {
  handleChange(values) { ... }
  handleUpdate(form) { ... }
  handleSubmit(values) { ... }
  render() {
    return (
      <LocalForm
        onUpdate={(form) => this.handleUpdate(form)}
        onChange={(values) => this.handleChange(values)}
        onSubmit={(values) => this.handleSubmit(values)}
      >
        <Control.text model=".username" />
        <Control.text model=".password" />
      </LocalForm>
    );
  }
}

That's all you need. Seriously. Read the Documentation for more information.

NOTE: Please use <LocalForm> with react-redux version 4.x.x.

Quick Start

For more fine-grained control (such as using custom reducers, storing form state globally, dispatching actions, etc.), you'll want to set up a Redux store for your forms.

Be sure to read the step-by-step quick start guide in the documentation.

import React from 'react';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import { combineForms } from 'react-redux-form';

import MyForm from './components/my-form-component';

const initialUser = { name: '' };

const store = createStore(combineForms({
  user: initialUser,
}));

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 { Control, Form } from 'react-redux-form';

class MyForm extends React.Component {
  handleSubmit(val) {
    // Do anything you want with the form value
    console.log(val);
  }

  render() {
    return (
      <Form model="user" onSubmit={(val) => this.handleSubmit(val)}>
        <label>Your name?</label>
        <Control.text model=".name" />
        <button>Submit!</button>
      </Form>
    );
  }
}

// No need to connect()!
export default MyForm;

Posting Issues

When posting an issue, please include a detailed description along with a relevant code sample. Attaching a failing test case with your issue will go a long way and is much appreciated.

Feel free to fork this CodePen for quickly creating reproducible examples!

Related Repositories

react-redux-universal-hot-example

react-redux-universal-hot-example

A starter boilerplate for a universal webapp using express, react, redux, webpac ...

react-redux-links

react-redux-links

Curated tutorial and resource links I've collected on React, Redux, ES6, and mor ...

redux-form

redux-form

A Higher Order Component using react-redux to keep form state in a Redux store ...

redux-form-test

redux-form-test

Shows how to do unit tests and integration tests with Redux-Form ...

react-redux-universal-hot-example

react-redux-universal-hot-example

A starter boilerplate for a universal webapp using express, react, redux, webpac ...


Top Contributors

davidkpiano erin-doyle chrisblossom greenkeeperio-bot mdgbayly lasergoat etrepum asvetliakov UlricGan Psykar hsrobflavorus spalger cableray eugene-moroz elodszopos tw0517tw i4got10 ataube jihchi bodia-uz Morhaus gitmagic-bot KevinBrolly pauljz stutanne gitter-badger VladShcherbin compact

Dependencies

package version
icepick ^1.1.0
invariant ~2.2.1
lodash.get ~4.4.2
lodash.topath ~4.5.2
prop-types ^15.5.6
shallow-compare 1.2.1
dev babel-cli ^6.5.1
babel-core ^6.5.2
babel-eslint ^6.0.0
babel-loader ^6.2.4
babel-plugin-lodash ^3.1.4
babel-plugin-transform-react-remove-prop-types ~0.2.10
babel-preset-es2015 ^6.5.0
babel-preset-react ^6.5.0
babel-preset-stage-2 ^6.5.0
babel-register ^6.5.2
chai ^3.5.0
chai-subset ^1.2.1
css-loader ^0.24.0
esdoc-es7-plugin 0.0.3
eslint ^2.7.0
eslint-config-airbnb ^9.0.1
eslint-plugin-import ^1.10.2
eslint-plugin-jsx-a11y ^1.5.5
eslint-plugin-react ^5.2.2
estraverse-fb ^1.3.1
express ^4.13.4
express-urlrewrite ^1.2.0
immutable ^3.7.6
jsdom ^9.2.1
lodash ~4.17.2
mocha ^2.5.1
react ^16.0.0-beta.2
react-dom ^16.0.0-beta.2
react-redux ~5.0.0
redux ^3.3.1
redux-immutable ^3.0.8
redux-logger ~2.6.1
redux-mock-store 0.0.6
redux-test-store ^0.4.0
redux-thunk ^2.0.1
sinon ^1.17.3
style-loader ^0.13.1
webpack ^1.12.14
webpack-bundle-size-analyzer ^2.0.1
webpack-dev-middleware ^1.6.1
peer react ^0.14.0 || ^15.0.0 || ^16.0.0
react-dom ^0.14.7 || ^15.0.0 || ^16.0.0
react-redux ^4.0.0 || ^5.0.3
redux ^3.0.0

Releases

-   v1.0.8 zip tar
-   v1.0.7 zip tar
-   v1.0.6 zip tar
-   v1.0.5 zip tar
-   v1.0.4 zip tar
-   v1.0.3 zip tar
-   v1.0.2 zip tar
-   v1.0.1 zip tar
-   v1.0.0 zip tar
-   v1.0.0-beta.12 zip tar
-   v1.0.0-beta.11 zip tar
-   v1.0.0-beta.10 zip tar
-   v1.0.0-beta.9 zip tar
-   v1.0.0-beta.8 zip tar
-   v1.0.0-beta.7 zip tar
-   v1.0.0-beta.6 zip tar
-   v1.0.0-beta.5 zip tar
-   v1.0.0-beta.4 zip tar
-   v1.0.0-beta.3 zip tar
-   v1.0.0-beta.2 zip tar
-   v1.0.0-beta.1 zip tar
-   v0.14.6 zip tar
-   v0.14.5 zip tar
-   v0.14.4 zip tar
-   v0.14.3 zip tar
-   v0.14.2 zip tar
-   v0.14.1 zip tar
-   v0.14.0 zip tar
-   v0.13.11 zip tar
-   v0.13.10 zip tar