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.
Required
Optional
Below is an example of
Installation
Install the material-ui-formik-components
package using the following command:$ npm install --save material-ui-formik-components
Peer dependencies
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
Using the components
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/xoplpm1w84import 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
Example
For a more detailed use of the package, please refer to the code in the example folder of this project.License
MIT