@shire-host/formik-material-ui
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.22 • Public • Published

    Build Status license Coverage Status

    Formik Material Ui

    Bindings for using Formik with Material UI.

    Getting Started

    Install the package as a dependency to your project (yarn or npm).

    yarn add formik-material-ui
    

    Then, import the components you need to use with Formik in the file you have your form component set up. The components avaliable are:

    • Checkbox & CheckboxWithLabel
    • RadioGroup
    • Select
    • SimpleFileUpload
    • Switch
    • TextField

    In this case we will use <TextField />.

    import { Formik, Field, Form } from 'formik';
    + import { TextField } from 'formik-material-ui';

    Next, in your Formik form component, pass this <TextField /> component as the component prop of the Formik <Field /> component:

    <Field
      name="email"
      label="Email"
      type="email"
    + component={TextField}
    />

    Now you can add any of the Material UI props to the <Field /> component and <TextField /> will be able to accept them.

    <Field
      name="email"
      label="Email"
      type="email"
      component={TextField}
    + margin="normal"
    + fullWidth
    />

    Goals

    • Convenience: This project containis mostly the tedious wrapper code needed to convert the formik field props to Material UI shapes. Which is why certain assumptions are made (See below). The mapping functions are exported so you can build on top of them for more specialized behavior

    Form Behaviour Assumptions

    • Errors are only displayed on touched/dirty fields
    • Fields are disabled during submission

    Non Goals

    • Negate the need to import Material UI directly or create custom components

    FAQ

    Custom onChange

    import MuiTextField from '@material-ui/core/TextField';
    import {fieldToTextField, TextField, TextFieldProps} from 'formik-material-ui';
    ...
    const UppercasingTextField = (props: TextFieldProps) => (
      <MuiTextField
        {...fieldToTextField(props)}
        onChange={event => {
          const {value} = event.target;
          props.form.setFieldValue(
            props.field.name,
            value ? value.toUpperCase() : ''
          );
        }}
      />
    );
    ...
    

    Composing mappers

    import {fieldToTextField} from 'formik-material-ui';
    
    <Field name="name" render={(props) => (<div>
      <Comp1 {...fieldToText(props)}>
      <Comp2 {...fieldToText(props)}>
      ...
    </div>)} />
    

    Development

    yarn install
    yarn storybook
    

    Running tests

    yarn prepublishOnly
    

    Install

    npm i @shire-host/formik-material-ui

    DownloadsWeekly Downloads

    1

    Version

    0.0.22

    License

    none

    Unpacked Size

    12.8 kB

    Total Files

    26

    Last publish

    Collaborators

    • michaelauderer