https://github.com/arojunior/redux-form-field-wrapper

Redux-form fields wrapper
https://github.com/arojunior/redux-form-field-wrapper

javascript react redux redux-form

Last synced: about 2 months ago
JSON representation

Redux-form fields wrapper

• Host: GitHub
• URL: https://github.com/arojunior/redux-form-field-wrapper
• Owner: arojunior
• Created: 2017-04-20T20:23:58.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-05-30T19:49:53.000Z (over 7 years ago)
• Last Synced: 2024-04-13T23:01:53.336Z (9 months ago)
• Topics: javascript, react, redux, redux-form
• Language: JavaScript
• Size: 110 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Redux-form Field Renderer

### Install

```shell

npm install redux-form-field-wrapper --save

```

### Usage

```javascript

import React from 'react'

import {Field, reduxForm} from 'redux-form'

import renderField from 'redux-form-field-wrapper'

const defaultConfig = {

  divClass: 'form-group',

  inputClass: 'col-md-10',

  labelClass: 'col-md-2',

  component: renderField

}

const Form = props => {

  const {handleSubmit, pristine, invalid, reset, submitting} = props

  return (

    

      

      

      

        Send

            

          

    )

}

export default reduxForm({

  form: 'myForm'

})(Form)

```

### Output

```html



  


    Name

  

  


    

  





  


    E-mail

  

  


    

  



```

### What about validation?

Just add your own validation method and populate errors in case of fail

```javascript

const validate = values => {

  const errors = {}

  if ( ! checkUsername(values.email)) {

    errors.email = 'Sorry, Dude. This username is already in use'

  }

  return errors

}

export default reduxForm({

  form: 'myForm',

  validate

})(Form)

```

### Need something easier?

```javascript

import renderField, {email} from 'redux-form-field-wrapper'

// ...Code

// ...Code

export default reduxForm({

  form: 'myForm'

})(Form)

// Obs: Don't need validate property

```

***Validation methods available:***

* required

* maxLength

* number

* minValue

* email