kevicency/formik-office-ui-fabric-react

💉 Instant pain reliever for using Formik with Office UI Fabric React 💉

formik-office-ui-fabric-react

💉 Instant pain reliever for using Formik with Office UI Fabric React 💉

Why?

To reduce the boilerplate code needed to get Fabrics input components work seamlessly with Formiks field props and validation errors.

How?

1. Install package

yarn add formik-office-ui-fabric-react
# or
npm install --save formik-office-ui-fabric-react

2. Replace FooComponent with FormikFooComponent or use the mapFieldToFooComponent, i.e

import { Formik, Form, Field } from 'formik'
import { DatePicker } from 'office-ui-fabric-react'
import { FormikDatePicker, mapFieldToDatePicker } from 'formik-office-ui-fabric-react'

const OldAndUgly = () => (
  <Formik initialValues={{ date: new Date() }}>
    <Form>
      <Field
        name="date"
        render={fieldProps => (
          <DatePicker
            value={/* wrapper code for fieldProps.value */}
            onSelectDate={/* wrapper code for fieldProps.onChange */}
            {/* and more ugly wrapper code trying to get name, onBlur, etc. working */}
          />
        )}
      />
    </Form>
  </Formik>
)

// using the component
const NewAndPretty = () => (
  <Formik initialValues={{ date: new Date() }}>
    <Form>
      <Field name="date" component={FormikDatePicker} />
    </Form>
  </Formik>
)

// or using the map function
const NewAndAlsoPretty = () => (
  <Formik initialValues={{ date: new Date() }}>
    <Form>
      <Field name="date" render={fieldProps => (
        <DatePicker {...mapFieldToDatePicker(fieldProps)} />
      )} />
    </Form>
  </Formik>
)

Documentation

• For a complete list of all supported components, see the Storybook
• Try it out: Code Sandbox

Development

git clone https://github.com/kmees/formik-office-ui-fabric-react
cd formik-office-ui-fabric-react && yarn install

Running development server

yarn start

Running tests

yarn test