Formik ready material ui 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.
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
Optional
Autocomplete
DatePicker
, DateTimePicker
, KeyboardDatePicker
, KeyboardTimePicker
, KeyboardDateTimePicker
and TimePicker
ChipInput
The following components are supported:
Autocomplete
- requires Material-UI Lab
ChipInput
- requires material-ui-chip-input
DatePicker
, DateTimePicker
, KeyboardDatePicker
, KeyboardTimePicker
, KeyboardDateTimePicker
and TimePicker
- please make sure you have installed date-fns
, moment
or luxon
see: Material-UI Pickers / Installation
RadioGroup
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