Formik: Typescript examples

[testerez]

It would be nice to have typescript examples to show how the interfaces and generics are supposed to be used.

[jaredpalmer]

Short version:

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)

Here is the same thing, but with more semantic naming of the generics:

...

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)

[testerez]

Thanks!

[fatihapaydin]

@jaredpalmer Can you provide complete working typescript code?

[abelkbil]

@fatihapaydin see here https://github.com/jaredpalmer/formik/issues/472
@jaredpalmer If you create a code, please use reactstrap. Thanks for effort.

[bidah]

@jaredpalmer what about an example for the render props version? 🙏