material-ui-formik-components
    TypeScript icon, indicating that this package has built-in type declarations

    0.7.3 • Public • Published

    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

    Install

    npm i material-ui-formik-components

    DownloadsWeekly Downloads

    1,970

    Version

    0.7.3

    License

    MIT

    Unpacked Size

    103 kB

    Total Files

    80

    Last publish

    Collaborators

    • gerhat