xbrain-redux-form-material-ui v2.0.28

X-Brain Redux Form Material UI

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

Installation

Using yarn:

  yarn add xbrain-redux-form-material-ui xbrain-react-components

Using npm:

  npm install --save xbrain-redux-form-material-ui xbrain-react-components

Available Components

• TextField
• Select

Usage

Rather than import your component class from material-ui, import it from xbrain-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';
import { TextField, Select } from 'xbrain-redux-form-material-ui';

class MyForm extends Component {
  render() {
    return (
      <form>
        <FormControl error>
          <Field name="name" label="Name" component={TextField} />
        </FormControl>
        <FormControl>
          <Field name="gender" component={Select} label="Gender">
            <MenuItem value="1">Male</MenuItem>
            <MenuItem value="0">Female</MenuItem>
          </Field>
        </FormControl>
      </form>
    );
  }
}

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

export default MyForm;