ReactFormApi typing not exposed

[frankkluijtmans]

Describe the bug

In my React app I'm passing down instances of FormApi in a couple of places where I'll use some of the props that are added on top of it in ReactFormApi. I see that this ReactFormApi was added here 145e0a9#diff-71307ac787e0ed388c8e67d3821dce46c1753ef4cca87f9e2c4b225d3bd30681.

Since this type is not exposed I'm unable to properly type the FormApi instance I'm passing down in the props. Since there doesn't seem to be a replacement for it I get the feeling that exposing this type might've simply been overlooked 😅

Your minimal, reproducible example

CodeSandbox

Steps to reproduce

After upgrading from < 24.3 to 24.3 >

1. Pass down FormApi instance in component props.
2. Get TS error for form.Subscribe, form.Field etc.

Expected behavior

The ability to import ReactFormApi typings.

How often does this bug happen?

None

Screenshots or Videos

No response

Platform

Any platform

TanStack Form adapter

None

TanStack Form version

v0.25.3

TypeScript version

5.5.2

Additional context

No response

[Balastrong]

You can temporarily get that with ReturnType<typeof useForm<TFormData>> with TFormData being your form schema, but we're indeed planning to expose ReactFormApi soon.

Actually, we're working on APIs specifically to build custom wrapper to form fields :D

[frankkluijtmans]

@Balastrong thank you for the quick reply! Great to know exposing these types is going to happen soon 😄 The temp workaround sadly doesn't always work in my codebase since when I pass down the form instance more than 1 level in the component tree, it results into an excessively deep type instantiation 😅

I set up a quick example of this in this codesandbox https://codesandbox.io/p/sandbox/great-smoke-cmqsfp?file=%2Fsrc%2FApp.tsx since it might be something to investigate.

[crutchcorn]

@frankkluijtmans since you're doing stuff in your codebase to internalize TanStack Form - we'd love your feedback on this PR example project:

https://github.com/TanStack/form/pull/825/files#diff-b2e0803ded7363bf3432f160f7c7f6e9bf4f982ad13b08ecb4789c228774f956

We're planning on making this the official way of doing what you're doing.

What do you think?

[frankkluijtmans]

@crutchcorn thanks for sharing this! This example is actually very similar to how I've been integrating TanStack Form in my codebase 🤔 I especially like the addition of the DeepKeyValueName utility type since I've been defining custom types for every type of form control like so 😅 :

type OnlyStringNames<
    TFormValues,
    TKeyValue extends DeepKeys<TFormValues>,
> = DeepValue<TFormValues, TKeyValue> extends string ? TKeyValue : never;

Only thought I have is maybe the form component exposed should handle form submission internally, so the consumer doesn't have to bother with things like

e.preventDefault()
e.stopPropagation()

[Balastrong]

ReactFormApi has been exposed in #868