useFormikContext and TypeScript

[oncet]

I've a large form which is divided into several smaller components, each of this components use useFormikContext() to get info like values, touched, erros, and so on.

I've created a separated file with the type for my form:

// FormType.ts

export type FormValues = {
  id?: string;
  name: string;
};

Which I pass to the context hook:

// SomeFormComponent.tsx

useFormikContext<FormValues>();

And also use it for the initial form values:

// FormWrapper.tsx

const initalValues: FormValues = {
  id: '',
  name: '',
};

return (
  <Formik initialValues={initalValues}>
    ...
  </Formik>
);

It works fine, but I was wondering, is there a better way for doing this? I was hoping to be able to get Formik to generate this type for me vs doing it manually, is this possible?

[AntonioLuisME]

Or even how to assign a values type to useFormikContext() in a form sub component that can be used in multiple different forms where the types are different for each form?

[abdulmatinsanni]

You can define a generic type to be used by the form sub component.

export type FormValues = {
  [key: string]: string;
};

Adapt the example below for your use case.

import { useFormikContext } from 'formik';

type FormFieldErrorTextProps = {
  fieldName: string;
};

export type FormValues = {
  [key: string]: string;
};

const FormFieldErrorText = ({fieldName}: FormFieldErrorTextProps): JSX.Element => {
  const { touched, errors } = useFormikContext<FormValues>();
  const hasError = Boolean(touched[fieldName] && errors[fieldName]);

  return (
    <>
      {hasError ? (
        <span className="text-red-600 text-xs mt-1 animate-fade-in-down">
          {errors[fieldName] as string}
        </span>
      ) : null}
    </>
  );
};

export default FormFieldErrorText;

Hopefully, this helps.

[ctrlaltdylan]

Thank you! I had no idea that you could pass the form values interface as an argument to the useFormikContext. That worked for me!

[AntonioLuisME]

@abdulmatinsanni isn't that the same as using the type any for useFormikContext?
It doesn't really help in defining precise types specific to each form the component will be used on and that will show in itellisense.