Skip to content

Create redux forms in a few lines of code and spend much less maintenance time on them.

Notifications You must be signed in to change notification settings

abeauvois/generic-redux-form

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

60 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

NPM version

generic-redux-form is under active development. APIs will change and things may still not work as expected. If you find any issue, please report it. We'll do our best to fix it.

GenericReduxForm

A Javascript library for making forms a breeze with JSON configurable file + Redux-Form

Demo

https://abeauvois.github.io/generic-redux-form

Usage

# install generic-redux-form
npm install generic-redux-form

# install with yarn
yarn add generic-redux-form

# run the tests
cd node_modules/generic-redux-form
npm test

# run the example
cd node_modules/generic-redux-form
npm install OR yarn

then

npm start

then open your browser and go to http://localhost:3030

Here is the code for a simple form with redux-form (without Generic Redux Form):

import React from 'react'
import { TextField } from 'redux-form-material-ui'
import { Field, reduxForm } from 'redux-form'

const SimpleForm = (props) => {
  const { handleSubmit, pristine, reset, submitting } = props
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <Field name="name"
          component={TextField}
          hintText="Name"
          floatingLabelText="Name"
          validate={required}
          ref="name" withRef/>
      </div>
      <div>
        <Field name="email"
          component={TextField}
          hintText="Email"
          floatingLabelText="Email"
          validate={[ required, email ]}/>
      </div>
      <div>
        <button type="submit" disabled={pristine || submitting}>Submit</button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button>
      </div>
    </form>
  )
}

export default reduxForm({
  form: 'simple'  // a unique identifier for this form
})(SimpleForm)

You get the same result with the following code:

import React from 'react'
import { TextField } from 'redux-form-material-ui'
import { GenericFormFields, GenericForm, gReduxForm, Validators } from 'generic-redux-form'

const genericFormFields = new GenericFormFields('login', {
      email:{
        type: 'input',
        label: 'email',
        validator: Validators.email,
        component: TextField,
        placeholder: 'EMAIL',
        default: 'my@email.com',
      },
      password:{
        type: 'input',
        label: 'password',
        validator: Validators.required,
        component: TextField,
        placeholder: 'PASSWORD',
        default: 'test',
    }
  })


class SimpleForm extends Component {
  constructor (props) {
    super(props)
  }

  render() {
    return (
        <div>
          <GenericForm {...this.props}/>
        </div>
    )
  }
}

export default gReduxForm(genericFormFields)(SimpleForm)

Contribute

See the contributing docs.

Changelog

See the release page

License

generic-redux-form is MIT licensed.

About

Create redux forms in a few lines of code and spend much less maintenance time on them.

Resources

Stars

Watchers

Forks

Packages

No packages published