Package Exports

formik-material-ui

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (formik-material-ui) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Formik Material Ui

Bindings for using Formik with Material UI.

Getting Started

yarn add formik-material-ui

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

formik-material-ui