Skip to content
πŸ’‰ Instant pain reliever for using Formik with Office UI Fabric React πŸ’‰
TypeScript JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook chore: use storybook-addon-application-insights Dec 6, 2018
.vscode docs(Storybook): add app insights Dec 6, 2018
src test: cleanup tests Dec 12, 2018
stories feat(FormikSpinButton): implement FormikSpinButton Dec 12, 2018
.editorconfig chore: setup typescript and jest Dec 4, 2018
.gitattributes chore: add git configuration Dec 4, 2018
.gitignore
.prettierrc chore: setup typescript and jest Dec 4, 2018
CHANGELOG.md chore(release): 1.0.0 Dec 12, 2018
LICENSE Initial commit Dec 4, 2018
README.md docs(README): add code sandbox link to readme Dec 12, 2018
azure-pipelines.yml chore: move coverage to a separate pipeline step Dec 5, 2018
jest.config.js
package.json
rollup.config.js fix(package): add office-ui-fabric-react and formik as external refer… Dec 5, 2018
tsconfig.json feat: implement FormikDatePicker Dec 4, 2018
tsconfig.package.json chore: cleanup build pipeline Dec 4, 2018
tslint.json chore: setup typescript and jest Dec 4, 2018
yarn.lock chore: use storybook-addon-application-insights Dec 6, 2018

README.md

npm version Build Status Coverage Status npm code style: prettier

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
  1. 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

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
You can’t perform that action at this time.