gerhat
Material-UI Formik Components
· 
· 
· 
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.
Installation
Install the material-ui-formik-components package using the following command:
$ npm install --save material-ui-formik-componentsPeer 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,KeyboardDateTimePickerandTimePicker - 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,KeyboardDateTimePickerandTimePicker- please make sure you have installeddate-fns,momentorluxonsee: Material-UI Pickers / InstallationRadioGroupSelectSwitchTextField
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 RegistrationFormExample
For a more detailed use of the package, please refer to the code in the example folder of this project.
License
MIT