How to correctly type a component prop for a form instance from a custom createFormHook?

[heinsenberg82]

Hello. I'm seeking guidance on the idiomatic way to type a component prop that accepts a form instance created by a custom hook (createFormHook). The core challenge is that the form's data type is dynamic based on the options passed to the hook at runtime.

The Setup

First, I have a central form.ts file to create a custom hook with pre-configured components, as recommended in the docs:

form.ts

import { createFormHookContexts, createFormHook } from '@tanstack/react-form'
// ... import my custom field components

export const { fieldContext, formContext, useFieldContext, useFormContext } =
    createFormHookContexts()

// Custom hook with project-specific field components
export const { useAppForm, withForm } = createFormHook({
    fieldContext,
    formContext,
    // ... fieldComponents & formComponents
})

In a parent component, I use this hook to create a form instance with specific defaultValues:

ParentComponent.tsx

import { useAppForm } from './form'
import { ChildComponent } from './ChildComponent'

export const ParentComponent = () => {
  const form = useAppForm({
    defaultValues: {
      nrProcesso: "",
      tipoProcesso: ""
    },
    // ... other options
  })

  // I need to pass this `form` instance to a child component
  return <ChildComponent form={form} />
}

The Problem

In ChildComponent.tsx, I need to define the type for the form prop. All my attempts have led to TypeScript errors.

ChildComponent.tsx

// What is the correct type for the `form` prop?
type ChildProps = {
  form: ???
}

export const ChildComponent = ({ form }: ChildProps) => {
  // I want to have full type inference here, e.g., for form.state.values.nrProcesso
  return (
    // ...
  )
}

What I've Tried

1. Using FormApi<T> directly:

   • Attempt: form: FormApi<typeof options.defaultValues>
   • Error: (TS2707) Generic type 'FormApi<...>' requires between 11 and 12 type arguments. This is understandable, as the custom hook returns a much more specific type.

2. Using ReturnType on the custom hook:

   • Attempt: type AppForm = ReturnType<typeof useAppForm>;
   • Problem: This resolves to a type where the form data is unknown (e.g., AppFieldExtendedReactFormApi<unknown, ...>). When I pass the specific form instance from the parent, I get an assignment error:
   • Error: (TS2322) Type 'AppFormInstance<{nrProcesso: string}>' is not assignable to 'AppFormInstance<unknown>'.

3. Creating a Generic Child Component:

   • Attempt: Making ChildComponent generic and trying various ways to type the prop, such as form: FormApi<TFormData> or creating a generic AppFormInstance<TFormData> type utility.
   • Problem: These approaches either lead back to the TS2707 error (because FormApi<T> is not the same as the custom hook's return type) or complex assignment errors (TS2322) because my manually constructed generic types don't match the "branded" type returned by createFormHook.

My Question

What is the correct and idiomatic way to type the form prop in ChildComponent so that it can accept any instance created by useAppForm, while maintaining full type safety and inference for the specific data shape (defaultValues) inside the component?

Thank you for your time and any guidance you can provide.