redux-form-material-ui

redux-form-material-ui

---

redux-form-material-ui is a set of wrappers to facilitate the use of material-ui components with redux-form.

---

Live Demo :eyes:

Installation

Using npm:

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

Available Components

• Checkbox
• RadioButtonGroup
• SelectField
• Slider
• TextField
• Toggle

Usage

Rather than import your component class from material-ui, import it from redux-form-material-ui and then pass the component class directly to the component prop of Field.

import { reduxForm, Field } from 'redux-form'
import MenuItem from 'material-ui/MenuItem'
import { RadioButton } from 'material-ui/RadioButton'
import {
  Checkbox,
  RadioButtonGroup,
  SelectField,
  TextField,
  Toggle
} 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'
})

export default MyForm