react-redux-formal

Long name, I know. But the name is supposed to convey that it's build on top of both react and redux.

Formal came into life after I experimented with redux-form but found it a bit too "heavy" for most usecases I required. It came with slightly too much out of the box so I decided to make a more lightweight alternative.

Installation

As you'd expect, react-redux-formal is available on npm.

$ npm install --save react-redux-formal

As the name would suggest, react-redux-formal depends on redux as well as react-redux, so you might need to issue

$ npm install --save redux react-redux

Setup

After you've installed the package, you'll need to add the formReducer to your store and expose the store to your app through react-redux's Provider.

Note: react-redux-formal requires the formReducer to be mounted at state.form.

import { Provider } from 'react-redux';
import { formReducer } from 'react-redux-formal';
import { render } from 'react-dom';
import { combineReducers, createStore } from 'redux';
 
const store = createStore(combineReducers({
  form: formReducer,
}));
 
render((
  <Provider store={store}>
    <App />
  </Provider>
), document.getElementById('app-container')):

Usage

With the reducer in place you can use the connectForm function to hook your app up and have fields injected. For example, a simple login form component might look something like this:

import PropTypes from 'prop-types';
import React from 'react';
import { connectForm, validators } from 'react-redux-formal';
 
export class Signup extends React.Component {
    static propTypes = {
        fields: PropTypes.object.isRequired,
        formValidate: PropTypes.func.isRequired,
        getValues: PropTypes.func.isRequired,
    }
 
    constructor() {
        super();
 
        this.onSubmit = this.onSubmit.bind(this);
    }
 
    onSubmit(ev) {
        ev.preventDefault();
 
        this.props.formValidate()
            .then(values => {
                /* do stuff with values */
            })
            .catch(() => {});
    }
 
    render() {
        const { fields } = this.props;
 
        return (
            <form onSubmit={this.onSubmit}>
                <fields.username />
                <fields.email />
                <fields.password />
 
                <button type="submit">Sign up</button>
            </form>
        );
    }
}
 
export default connectForm(() => {
    name: 'signup',
    fields: {
        username: {
            type: 'text',
            label: 'Username',
            validators: [
                validators.required('Username is required'),
            ],
        },
        email: {
            type: 'text',
            label: 'E-mail',
            validators: [
                validators.required('E-mail is required'),
            ],
        },
        password: {
            type: 'text',
            label: 'Password',
            validators: [
                validators.required('Password is required'),
            ],
        },
    },
})(Signup);

API

connectForm(mapStateToOptions)(component)

Generate fields that are injected into the wrapped component. Does not modify the component passed to it. Instead it returns a new component which wraps the original component which should be used instead.

• mapStateToOptions (Function): A function which should return an object with options for your form. This gets passed the same arguments as redux connect's mapStateToProps. The return options object can have the following keys:
  • name (String): Name of the form, this is used to store the form in redux under its own namespace. Ensure this is unique for each form.
  • fields (Object): Object containing field specifications. The key will be reused when injecting fields into your component.
  • [values] (Object): Initial values to populate the fields with.
  • [inputTypes] (Object): Custom input types. This can be used to specify your own input types if you don't want to use the ones provided.
• component (Component): The component to wrap.

License

MIT © Chiel Kunkels