What type is useFormik in formik forms?

user_2204835 0
Viewed 5708

I created a react formik form that consists of several components. I need pass down the useFormik object to the components of the form. What is the right type for formik?

Parent form

 const formik = useFormik({ ...

Child component

interface IAddressBoxProps {
  skip: () => void
  formik: any
}

const AddressBox: React.FC<IAddressBoxProps> = (props: IAddressBoxProps) => {
  const { skip, formik } = props
 ...
formik typescript reactjs
2 Answers

When you're unsure of a type, you can use typeof formik to get the type for that variable.

The hook signature is

useFormik<Values>(config: FormikConfig<Values>): FormikProps<Values>

So the return type is FormikProps with a generic that depends on the values of your form.

import {useFormik, FormikProps} from "formik";

interface MyValues {
    id: number;
}
export const MyComponent = () => {
    const formik: FormikProps<MyValues> = useFormik<MyValues>({});
}

Hook Docs

Typescript Playground

user_104315740

This may be old but your interface can be like this

interface IAddressBoxProps {
  skip: () => void
  formik: FormikProps<InitialValuesInterface>
}
user_114382910
Related