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-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 and TimePicker
• material-ui-chip-input >= 1.0 - used by ChipInput

Using the components

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

Example

For a more detailed use of the package, please refer to the code in the example folder of this project.

License

MIT