Typescript examples about formik HOT 5 CLOSED

import * as React from 'react'
import { Formik, InjectedFormikProps } from 'formik'
import Yup from 'yup'

interface Props {
 ...
}

interface Values {
...
}

interface Payload {
...
}

export const MyInnerForm: React.SFC<InjectedFormikProps<Props, Values>> = (props) => (...)

export default Formik<Props, Values, Payload>({
   displayName: 'MyInnerForm',
   validationSchema: Yup.object().shape({...}),
   // you don't need to explicitly type the mapPropsToValues, mapValuesToPayload, and handleSubmit because their types are inferred
   mapPropsToValues: (props: Props) => ({...}),
   mapValuesToPayload: (values: Values) => ({..}),
   handleSubmit: (payload: Payload, formikBag: FormikBag<Props, Values>) => {
     // formikBag contains all the setters and props
  })(MyInnerForm)

...

interface PropsThatWillBePassedToTheWrappedComponent {
...
}

interface ShapeOfWhatMapPropsToValuesReturns {
  // this should be the state of  what will be injected as`props,values`
}

interface ShapeOfWhatMapValuesToPayloadReturn {
 // shape of the payload (i.e. what get's passed as first argument of handleSubmit
}



export const MyInnerForm: React.SFC<InjectedFormikProps<PropsThatWillBePassedToTheWrappedComponent, ShapeOfWhatMapPropsToValuesReturns>> = (props) => (...)

export default Formik<PropsThatWillBePassedToTheWrappedComponent, ShapeOfWhatMapValuesToPropsReturns, ShapeOfWhatMapValuesToPayloadReturns>({...})(MyInnerForm)