redux-form-material-ui-adapter

redux-form-material-ui-adapter is a set of wrappers to facilitate the use of material-ui components with redux-form. This library was forked from the original redux-form-material-ui and updated to use the latest versions of all dependencies

Latest version supports material-ui up to version 4.x.x

Live Demo :eyes:

Installation

Using npm:

  $ npm install --save redux-form-material-ui-adapter @material-ui/core

Using yarn:

  $ yarn add redux-form-material-ui-adapter @material-ui/core

If you will be using the DatePicker component, you will also need to install @material-ui/pickers

Using npm:

  $ npm install --save @material-ui/pickers

Using yarn:

  $ yarn add @material-ui/pickers

Available Components

• Checkbox
• DatePicker
• RadioGroup
• Select
• Slider
• Switch
• TextField

Usage

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

import { reduxForm, Field } from 'redux-form';
import MenuItem from '@material-ui/core/MenuItem';
import Radio from '@material-ui/core/RadioButton';
import {
    Checkbox,
    RadioGroup,
    Select,
    TextField,
    Switch,
    FormControlLabel
} from 'redux-form-material-ui-adapter';

class MyForm extends Component {
    render() {
        return (
            <form>
                <Field
                    name="username"
                    component={TextField}
                    placeholder="Street"
                />

                <Field
                    name="plan"
                    component={Select}
                    placeholder="Select a plan"
                >
                    <MenuItem value="monthly">Monthly</MenuItem>
                    <MenuItem value="yearly">Yearly</MenuItem>
                    <MenuItem value="lifetime">Lifetime</MenuItem>
                </Field>

                <FormControlLabel
                    control={<Field name="agreeToTerms" component={Checkbox} />}
                    label="Agree to terms?"
                />

                <FormControlLabel
                    control={<Field name="receiveEmails" component={Switch} />}
                    label="Please spam me!"
                />

                <Field name="bestFramework" component={RadioGroup}>
                    <Radio value="react" label="React" />
                    <Radio value="angular" label="Angular" />
                    <Radio 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.

Support

Reach out to me at one of the following places:
E-Mail: [email protected]
Github Issues: https://github.com/Aldrixan/redux-form-material-ui-adapter/issues

Contributing

(Back to top)
Your contributions are always welcome! Please have a look at the contribution guidelines first. :tada:
For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.

License

MIT
By submitting a pull request for this project, you agree to license your contribution under the MIT license to this project.