redux-form-cc

Installation

$ npm install redux-form-cc --save
$ yarn add redux-form-cc

Step 1 : Create Form Data

const formData = state => ({
  firstname: {
    name: 'firstname',
    type: 'input',
    label: 'Firstname',
    value: state.form.firstname,
    placeholder: 'write down your firstname',
    disabled: false,
    rules: [
      {
        message: 'Required',
        rule: value => value !== ''
      },
      {
        message: 'Please key "redux-form-cc"',
        rule: value => value === 'redux-form-cc'
      }
    ]
  },
  lastname: {
    name: 'lastname',
    type: 'input',
    label: 'Lastname',
    value: state.form.lastname,
    placeholder: 'write down your lastname',
    disabled: false
  }
});

Step 2 : Create UI Input

const UIInputField = ({ fieldData, onChange }) => (
  <div>
    <input {...fieldData} onChange={e => onChange(e.target.value)} />
    {fieldData.message}
  </div>
);
 
const renderUIInputField = (fieldData, onChange) => {
  return <UIInputField fieldData={fieldData} onChange={onChange} />;
};

step 3 : Create Form action

Using with redux-thunk

const action = ({ key, value }) => dispatch =>
  dispatch({
    type: 'UPDATE-FORM-VALUE',
    key,
    value
  });

Create Form with HOC

import { createForm } from 'redux-form-cc';
 
const options = {
  action,
  formData,
  renderUIInputField
};
 
const ComponentWithForm = createForm(options)(Component);

Render Fields

The component will has form and firstError

class Component extends React.Component {
  render() {
    const { form, firstError } = this.props;
    return (
      <div>
        {form.firstname}
        {form.lastname}
        {firstError}
      </div>
    );
  }
}

Create Form with Hooks

import { useReduxFormCC } from 'redux-form-cc';
 
const options = {
  action,
  formData,
  renderUIInputField
};
 
const Component = () => {
  const { form, firstError } = useReduxFormCC(options);
  return (
    <div>
      {form.firstname}
      {form.lastname}
      {firstError}
    </div>
  );
};