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
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;