redux-form-material-ui

redux-form-material-ui

---

redux-form-material-ui is an adapter between Redux Form and Material UI components.

---

Installation

Using npm:

  $ npm install --save redux-form-material-ui

Usage

Pass this library as the adapter config property to redux-form, and then refer to the Material UI widgets as strings to the component property of redux-form's Field component.

import { reduxForm, Field } from 'redux-form'
import MenuItem from 'material-ui/MenuItem'
import { RadioButton } from 'material-ui/RadioButton'
import adapter from 'redux-form-material-ui'

class MyForm extends Component {
  render() {
    return (
      <form>
        <Field name="username" component="TextField" hintText="Street"/>
        
        <Field name="plan" component="SelectField" hintText="Select a plan">
          <MenuItem value="monthly" primaryText="Monthly"/>
          <MenuItem value="yearly" primaryText="Yearly"/>
          <MenuItem value="lifetime" primaryText="Lifetime"/>
        </Field>
        
        <Field name="agreeToTerms" component="Checkbox" label="Agree to terms?"/>
        
        <Field name="receiveEmails" component="Toggle" label="Please spam me!"/>
        
        <Field name="bestFramework" component="RadioButtonGroup">
          <RadioButton value="react" label="React"/>
          <RadioButton value="angular" label="Angular"/>
          <RadioButton value="ember" label="Ember"/>
        </Field>
      </form>
    )
  }
}

// Decorate with redux-form
MyForm = reduxForm({
  form: 'myForm',
  adapter
})

export default MyForm