We all love Material-UI and Formik, we just need an easy way to make them work seamlessly together. This library was built just for that.
Install the material-ui-formik-components
package using the following command:
$ npm install --save material-ui-formik-components
The extension depends on the following packages:
Required
- react >= 16.8
- react-dom >= 16.8
- Material-UI >= 4.0
- Formik >= 1.0
Optional
- React Select >= 2.0 - used by
Autocomplete
andSelect
- Material-UI Pickers >= 3.0 - used by
DateTimePicker
- material-ui-chip-input >= 1.0.0-beta.16 - used by
ChipInput
The following components are supported:
Autocomplete
ChipInput
DateTimePicker
- please make sure you have installeddate-fns
,moment
orluxon
see: Material-UI Pickers / InstallationRadioGroup
Select
Switch
TextField
Below is an example of TextField
and Select
components. Code sandbox url: https://codesandbox.io/s/xoplpm1w84
import React from "react";
import { Formik, Form, Field } from "formik";
import { TextField } from "material-ui-formik-components/TextField";
import { Select } from "material-ui-formik-components/Select";
class RegistrationForm extends React.PureComponent {
render() {
return (
<div>
<h1>Register</h1>
<Formik
initialValues={{
username: "",
gender: "Male"
}}
onSubmit={values => {
alert(`Username: ${values.username}\nGender: ${values.gender}`);
}}
render={props => (
<Form>
<Field
name="username"
label="Username"
component={TextField}
/>
<Field
required
name="gender"
label="Gender"
options={[
{ value: "Male", label: "Male" },
{ value: "Female", label: "Female" },
{ value: "Other", label: "Other" }
]}
component={Select}
/>
<button
type="submit"
disabled={!props.dirty}
>
Submit
</button>
</Form>
)
/>
</div>
);
}
}
export default RegistrationForm;
For a more detailed use of the package, please refer to the code in the example folder of this project.
MIT