Package Exports

react-redux-form

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-redux-form) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Redux Form

⚠️ 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!

react-redux-form