README.md

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 >= 1.0

Optional

• React Select >= 2.0 - used by Autocomplete and Select
• Material-UI Pickers >= 3.0 - used by DateTimePicker
• material-ui-chip-input >= 1.0.0-beta.16 - used by ChipInput

Using the components

The following components are supported:

• Autocomplete
• ChipInput
• DateTimePicker - 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}`);
          }}
          render={props => (
            <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={!props.dirty}
              >
                Submit
              </button>
            </Form>
          )
        />
      </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