feat(react-form): add useTypedAppFormContext

.changeset/great-ghosts-sin.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/react-form': patch
+---
+
+- add `useTypedAppFormContext`

packages/react-form/src/createFormHook.tsx

@@ -64,6 +64,33 @@ type UnwrapDefaultOrAny<DefaultT, T> = [DefaultT] extends [T]
     : T
   : T
 
+function useFormContext() {
+  const form = useContext(formContext)
+
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  if (!form) {
+    throw new Error(
+      '`formContext` only works when within a `formComponent` passed to `createFormHook`',
+    )
+  }
+
+  return form as ReactFormExtendedApi<
+    // If you need access to the form data, you need to use `withForm` instead
+    Record<string, never>,
+    any,
+    any,
+    any,
+    any,
+    any,
+    any,
+    any,
+    any,
+    any,
+    any,
+    any
+  >
+}
+
 export function createFormHookContexts() {
   function useFieldContext<TData>() {
     const field = useContext(fieldContext)
@@ -102,33 +129,6 @@ export function createFormHookContexts() {
     >
   }
 
-  function useFormContext() {
-    const form = useContext(formContext)
-
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    if (!form) {
-      throw new Error(
-        '`formContext` only works when within a `formComponent` passed to `createFormHook`',
-      )
-    }
-
-    return form as ReactFormExtendedApi<
-      // If you need access to the form data, you need to use `withForm` instead
-      Record<string, never>,
-      any,
-      any,
-      any,
-      any,
-      any,
-      any,
-      any,
-      any,
-      any,
-      any,
-      any
-    >
-  }
-
   return { fieldContext, useFieldContext, useFormContext, formContext }
 }
 
@@ -536,9 +536,64 @@ export function createFormHook<
     }
   }
 
+  /**
+   * ⚠️ **Use withForm whenever possible.**
+   *
+   * Gets a typed form from the `<form.AppForm />` context.
+   */
+  function useTypedAppFormContext<
+    TFormData,
+    TOnMount extends undefined | FormValidateOrFn<TFormData>,
+    TOnChange extends undefined | FormValidateOrFn<TFormData>,
+    TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+    TOnBlur extends undefined | FormValidateOrFn<TFormData>,
+    TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+    TOnSubmit extends undefined | FormValidateOrFn<TFormData>,
+    TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+    TOnDynamic extends undefined | FormValidateOrFn<TFormData>,
+    TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+    TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,
+    TSubmitMeta,
+  >(
+    _props: FormOptions<
+      TFormData,
+      TOnMount,
+      TOnChange,
+      TOnChangeAsync,
+      TOnBlur,
+      TOnBlurAsync,
+      TOnSubmit,
+      TOnSubmitAsync,
+      TOnDynamic,
+      TOnDynamicAsync,
+      TOnServer,
+      TSubmitMeta
+    >,
+  ): AppFieldExtendedReactFormApi<
+    TFormData,
+    TOnMount,
+    TOnChange,
+    TOnChangeAsync,
+    TOnBlur,
+    TOnBlurAsync,
+    TOnSubmit,
+    TOnSubmitAsync,
+    TOnDynamic,
+    TOnDynamicAsync,
+    TOnServer,
+    TSubmitMeta,
+    TComponents,
+    TFormComponents
+  > {
+    const form = useFormContext()
+
+    return form as never
+  }
+
   return {
     useAppForm,
     withForm,
     withFieldGroup,
+    useTypedAppFormContext,
   }
 }

packages/react-form/tests/createFormHook.test.tsx

@@ -31,16 +31,17 @@ function SubscribeButton({ label }: { label: string }) {
   )
 }
 
-const { useAppForm, withForm, withFieldGroup } = createFormHook({
-  fieldComponents: {
-    TextField,
-  },
-  formComponents: {
-    SubscribeButton,
-  },
-  fieldContext,
-  formContext,
-})
+const { useAppForm, withForm, withFieldGroup, useTypedAppFormContext } =
+  createFormHook({
+    fieldComponents: {
+      TextField,
+    },
+    formComponents: {
+      SubscribeButton,
+    },
+    fieldContext,
+    formContext,
+  })
 
 describe('createFormHook', () => {
   it('should allow to set default value', () => {
@@ -580,4 +581,47 @@ describe('createFormHook', () => {
     await user.click(target)
     expect(result).toHaveTextContent('1')
   })
+
+  it('should allow using typed app form', () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+    const formOpts = formOptions({
+      defaultValues: {
+        firstName: 'FirstName',
+        lastName: 'LastName',
+      } as Person,
+    })
+
+    function Child() {
+      const form = useTypedAppFormContext(formOpts)
+
+      return (
+        <form.AppField
+          name="firstName"
+          children={(field) => <field.TextField label="Testing" />}
+        />
+      )
+    }
+
+    function Parent() {
+      const form = useAppForm({
+        defaultValues: {
+          firstName: 'FirstName',
+          lastName: 'LastName',
+        } as Person,
+      })
+
+      return (
+        <form.AppForm>
+          <Child />
+        </form.AppForm>
+      )
+    }
+
+    const { getByLabelText } = render(<Parent />)
+    const input = getByLabelText('Testing')
+    expect(input).toHaveValue('FirstName')
+  })
 })