https://github.com/mihirsoni/simple-redux-form

This simple redux form a tiny alternative for redux-form
https://github.com/mihirsoni/simple-redux-form

forms react reactforms redux redux-form

Last synced: 26 days ago
JSON representation

This simple redux form a tiny alternative for redux-form

• Host: GitHub
• URL: https://github.com/mihirsoni/simple-redux-form
• Owner: mihirsoni
• Created: 2016-08-07T17:15:46.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-02-15T08:44:05.000Z (over 7 years ago)
• Last Synced: 2024-09-21T16:38:03.115Z (about 2 months ago)
• Topics: forms, react, reactforms, redux, redux-form
• Language: JavaScript
• Homepage:
• Size: 12.7 KB
• Stars: 11
• Watchers: 5
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Simplest Redux Form


> Higher order component for React Redux forms (inspired by [redux-form](https://github.com/erikras/redux-form))

## Note 

Idea of this library is 100% inspired from [redux-form](https://github.com/erikras/redux-form) (v5).

This library is subset of [redux-form](https://github.com/erikras/redux-form) for small / few forms.

If your application is form heavey with large / complex form please use [redux-form](https://github.com/erikras/redux-form).

I have implemented this libray for following reasons :- 

* [redux-form](https://github.com/erikras/redux-form) is great way of managing forms within application with react and redux.

* For small forms using large library will add up unnecessary bundle size increase, this library focus on simple and small version of `redux-from`

* Scope of this library will be very minimal, if you want full fledge library please use `redux-form`.

## 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.

```js

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.

```js

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 } }) => (

  

    

    

  

)

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

* [ ] Docs

* [ ] Examples

## License

MIT