https://github.com/kevicency/formik-office-ui-fabric-react

💉 Instant pain reliever for using Formik with Office UI Fabric React 💉
https://github.com/kevicency/formik-office-ui-fabric-react

formik office-ui-fabric office-ui-fabric-react react

Last synced: 28 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/kevicency/formik-office-ui-fabric-react
• Owner: kevicency
• License: mit
• Created: 2018-12-04T13:40:40.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-12-12T16:29:46.000Z (over 7 years ago)
• Last Synced: 2026-02-19T01:27:39.585Z (5 months ago)
• Topics: formik, office-ui-fabric, office-ui-fabric-react, react
• Language: TypeScript
• Homepage: https://kmees.github.io/formik-office-ui-fabric-react
• Size: 7.75 MB
• Stars: 42
• Watchers: 7
• Forks: 13
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
[![npm version](https://img.shields.io/npm/v/formik-office-ui-fabric-react.svg?style=flat)](https://www.npmjs.com/package/formik-office-ui-fabric-react) [![Build Status](https://dev.azure.com/kmees/formik-office-ui-fabric-react/_apis/build/status/kmees.formik-office-ui-fabric-react)](https://dev.azure.com/kmees/formik-office-ui-fabric-react/_build/latest?definitionId=1) [![Coverage Status](https://coveralls.io/repos/github/kmees/formik-office-ui-fabric-react/badge.svg?branch=master)](https://coveralls.io/github/kmees/formik-office-ui-fabric-react?branch=master) [![npm](https://img.shields.io/npm/l/formik-office-ui-fabric-react.svg?style=flat)](https://www.npmjs.com/package/formik-office-ui-fabric-react) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat)](https://github.com/prettier/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](https://developer.microsoft.com/en-us/fabric#/components) work seamlessly with Formiks [field props](https://jaredpalmer.com/formik/docs/api/field) and validation errors.

## How?

1. Install package

```bash

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

```tsx

import { Formik, Form, Field } from 'formik'

import { DatePicker } from 'office-ui-fabric-react'

import { FormikDatePicker, mapFieldToDatePicker } from 'formik-office-ui-fabric-react'

const OldAndUgly = () => (

  

    

       (

          

        )}

      />

    

  

)

// using the component

const NewAndPretty = () => (

  

    

      

    

  

)

// or using the map function

const NewAndAlsoPretty = () => (

  

    

       (

        

      )} />

    

  

)

```

## Documentation

- For a complete list of all supported components, see the [Storybook](https://kmees.github.io/formik-office-ui-fabric-react)

- Try it out: [Code Sandbox](https://codesandbox.io/s/oo7q88p06)

## 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

```