JavaScript
Switch branches/tags
Clone or download
Latest commit c5d6d4d Jul 11, 2018
Permalink
Failed to load latest commit information.
.github Update ISSUE_TEMPLATE.md Nov 4, 2017
docs Fix urls on guide quickstart page Jun 19, 2018
examples Fixed double binding in examples user-form.js Feb 1, 2018
src fix bug in import Jul 6, 2018
test stop submit and reset event from propagating by default May 9, 2018
.babelrc Revert "Revert "Merge remote-tracking branch 'davidkpiano/master'"" Oct 27, 2016
.bookignore Updating book files Sep 26, 2016
.editorconfig Added eslint and airbnb-config packages, eslintrc, eslintignore, and … Feb 25, 2016
.eslintignore Updating book files Sep 26, 2016
.eslintrc Revert "Using findNodeHandle for React Native. Addresses #882" Jul 24, 2017
.gitignore Added failing test Aug 16, 2017
.npmignore Ignoring .babelrc in .npmignore. Fixes #417 Sep 27, 2016
.travis.yml Updating travis.yml Jan 10, 2018
LICENSE Initial commit Dec 11, 2015
README.md Update README.md Jul 11, 2018
SUMMARY.md Updating SUMMARY.md Dec 9, 2016
UPGRADE_GUIDE.md Updating docs Dec 2, 2016
book.json Omitting react-dom for react native environments. Fixes #415 Sep 27, 2016
contributing.json add contributing.json file (https://gitmagic.io/rules) Apr 13, 2016
esdoc.json Simplifying change reducer (also fixes some edge-case bugs) Sep 5, 2016
immutable.d.ts Added tsdef for lib/immutable Jul 5, 2016
immutable.js Reverting immutable path change Jan 4, 2017
native.js Targeting ES5 version of native.js. Fixes #654 Feb 18, 2017
package-lock.json fix bug in import Jul 6, 2018
package.json 1.16.9 Jun 5, 2018
react-redux-form.d.ts fix ChangeEvent Jul 6, 2018
wallaby.config.js ****TESTS***** moved test from ./lib to ./src. Source compiled regard… Feb 25, 2016
webpack.config.base.js Revert "Using findNodeHandle for React Native. Addresses #882" Jul 24, 2017
webpack.config.prod.js fix umd build Aug 2, 2016
yarn.lock stop submit and reset event from propagating by default May 9, 2018

README.md

React Redux Form

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

⚠️ This project is in maintenance mode only. Please consider using Formik instead.

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 react-redux-form@latest --save

Installation

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

# version 1.x.x
npm install react-redux-form@latest --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 or 5.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 or this CodeSandbox for quickly creating reproducible examples!