rfm

redux-form-material-ui

A set of wrapper components to facilitate using Material UI with Redux Form

Showing:

Popularity

Downloads/wk

3.4K

GitHub Stars

834

Maintenance

Last Commit

4yrs ago

Contributors

22

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Categories

React Forms

Readme


redux-form-material-ui


NPM Version NPM Downloads Build Status codecov.io CDNJS version

For material-ui v1-beta support see 5.0 Documentation.

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


Live Demo 👀

Installation

Using npm:

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

Available Components

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,
  DatePicker
} 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="eventDate" component={DatePicker} format={null} hintText="What day is the event?"/>

        <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'
})(MyForm)

export default MyForm

No Default Values

Because of the strict "controlled component" nature of redux-form, some of the Material UI functionality related to defaulting of values has been disabled e.g. defaultValue, defaultDate, defaultTime, defaultToggled, defaultChecked, etc. If you need a field to be initialized to a certain state, you should use the initialValues API of redux-form.

Instance API

getRenderedComponent()

Returns a reference to the Material UI component that has been rendered. This is useful for calling instance methods on the Material UI components. For example, if you wanted to focus on the username element when your form mounts, you could do:

componentWillMount() {
  this.refs.firstField      // the Field
    .getRenderedComponent() // on Field, returns ReduxFormMaterialUITextField
    .getRenderedComponent() // on ReduxFormMaterialUITextField, returns TextField
    .focus()                // on TextField
}

as long as you specified a ref and withRef on your Field component.

render() {
  return (
    <form>
      ...
      <Field name="username" component={TextField} withRef ref="firstField"/>
      ...
    </form>
  )
}

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

react-hook-form📋 React Hooks for form state management and validation (Web + React Native)
User Rating
4.8/ 5
126
Top Feedback
46Great Documentation
39Easy to Use
38Performant
GitHub Stars
25K
Weekly Downloads
1M
rs
react-selectThe Select Component for React.js
User Rating
4.2/ 5
78
Top Feedback
17Great Documentation
14Easy to Use
13Performant
GitHub Stars
24K
Weekly Downloads
3M
formikBuild forms in React, without the tears 😭
User Rating
4.4/ 5
171
Top Feedback
33Great Documentation
26Easy to Use
21Performant
GitHub Stars
29K
Weekly Downloads
1M
survey-reactJavaScript Survey and Form Library
User Rating
4.0/ 5
1
Top Feedback
2Easy to Use
GitHub Stars
3K
Weekly Downloads
16K
uniformsA React library for building forms from any schema.
User Rating
5.0/ 5
1
Top Feedback
N/A
GitHub Stars
2K
Weekly Downloads
9K
formik-material-uiBindings for using Formik with Material-UI
User Rating
5.0/ 5
1
Top Feedback
1Easy to Use
GitHub Stars
865
Weekly Downloads
43K
See 49 Alternatives

Tutorials

No tutorials found
Add a tutorial