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 >= 2.0
Optional
- Material-UI Lab >4.0 - used by
Autocomplete
- Material-UI Pickers >= 3.0 - used by
DatePicker
,DateTimePicker
,KeyboardDatePicker
,KeyboardTimePicker
,KeyboardDateTimePicker
andTimePicker
- material-ui-chip-input >= 1.0 - used by
ChipInput
The following components are supported:
Autocomplete
- requires Material-UI LabChipInput
- requires material-ui-chip-inputDatePicker
,DateTimePicker
,KeyboardDatePicker
,KeyboardTimePicker
,KeyboardDateTimePicker
andTimePicker
- 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}`)
}}
>
{formik => (
<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={!formik.dirty}>
Submit
</button>
</Form>
)}
</Formik>
</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