react redux form

A versatile, fast, and intuitive library for creating complex and performant forms in React and Redux.

Quick Start

Install the dependencies (you probably already have these):


npm install react react-dom redux react-redux redux-thunk --save
      

Install React Redux Form:


npm install react-redux-form@latest --save
      

Get started:

Quick Start Guide

Stores
& Reducers


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

const initialUser = {
  firstName: '',
  lastName: '',
};

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

Forms
& Controls


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

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

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

        <label>
          <Control.checkbox model="user.remember" />
          Remember me
        </label>

        <button>Submit!</button>
      </Form>
    );
  }
}

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

Validators
& Errors


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

class MyForm extends React.Component {
  render() {
    return (
      <Form model="user">
        <label>Username</label>
        <Control.text
          model="user.username"
          validators={{
            required: (val) => !!val.length,
            minLength: (val) => val.length > 8,
          }}
        />
        <Errors
          model="user.username"
          messages={{
            required: 'Username is required.',
            minLength: 'Username must be more than 8 characters.',
          }}
        />
        <button>Submit!</button>
      </Form>
    );
  }
}

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