Controlled Forms

An untested and incomplete package for building forms in React & Redux.

TODO:

• Tests
• HOC so fields can be written with custom HTML (just add a component that passes the key props down)
• Proper readme (document all components, selectors, actions, reducer, & validation)
• Many other things

Getting started

Add the reducer to your store (thunk middleware is required):

import { createStore, applyMiddleware, combineReducers } from 'redux';
import thunk from 'redux-thunk';
import { reducer as forms } from 'controlled-form';

const store = createStore(
  combineReducers({
    forms, // the 'forms' key is required
    // ...your reducers
  }),
  undefined, // initial state
  applyMiddleware(thunk)
);

Add a form to your app:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bool } from 'prop-types';
import { Form, Input, Select, selectors as s } from 'controlled-form';
import 'controlled-form/assets/style.css'; // optional basic styles

const formId = 'someForm';
const validator = {
  name: {
    test: v => !!v,
    message: 'Please enter your name',
  },
  favBand: [{
    test: (v, values) => !!values.name,
    message: 'Go back and enter your name',
  }, {
    test: v => !!~['Muse', 'Radiohead'].indexOf(v),
    message: 'Please select from the available options',
  }]
};

class SomeForm extends Component {
  static propTypes = {
    validating: bool.isRequired,
  };

  handleSubmit = (formState) => {
    console.log(formState)
  };
  
  render() {
    return (
      <Form
        id={formId}
        handleSubmit={this.handleSubmit}
        validator={validator}
      >
        <Input
          name="name"
          label="Your name"
        />
        <Select
          name="favBand"
          label="Favourite band"
          placeholder="Please select"
          options={['Muse', 'Radiohead']}
        />
        <hr />
        <input
          type="submit"
          value={this.props.validating ? '...' : 'Submit'}
        />
        <input type="reset" />
      </Form>
    );
  }
}

export default connect(
  state => ({
    validating: s.isValidatingForm(state, formId),
  })
)(SomeForm);