Skip to content

gerhat/material-ui-formik-components

Repository files navigation

Material-UI Formik Components
NPM · Total Downloads · devDependency Status · npm bundle size

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

Optional

Using the components

The following components are supported:

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