Home

Awesome

<h1 align="center">Simplest Redux Form</h1>

Higher order component for React Redux forms (inspired by redux-form)

Note

Idea of this library is 100% inspired from redux-form (v5).

This library is subset of redux-form for small / few forms. If your application is form heavey with large / complex form please use redux-form.

I have implemented this libray for following reasons :-

Installation

$ npm install --save simple-redux-form

Usage

Step #1

The first thing, you have to mount simple-redux-form reducer to your redux reducers. Configure this inside your rootReducers.

import {reducer as simpleFormReducer} from 'simple-redux-form';
const reducers = {
  // your other reducers
  form: simpleFormReducer  
}

Step #2

You need to decorate your component with simpleReduxForm.

import simpleReduxForm from 'simple-redux-form'
const fields = ['firstName', 'lastName'];
function validate(values) {
  const errors = {};
  if (!values.firstName) {
    errors.firstName = 'Required';
  }
  if (!values.lastName) {
    errors.lastName = 'Required';
  }
  return errors;
}

const MyNewForm = ({ fields: {firstName, lastName } }) => (
  <form>
    <input {...firstName} />
    <input {...lastName} />
  </form>
)

export default simpleReduxForm(MyForm, { 
  form: 'test'
  fields, 
  validate,
});

Each field in the fields prop contains the value a onChange, error , touched as sugger props to each field.

You can also pass fields as props.

For custom Input components this library expose , setValue function with each field for setting vlaues manually.

Todo

License

MIT