feat(react): UseFormReturnType utility type

TanStack · Dec 20, 2024 · 616d520 · 616d520
1 parent bb46a92
commit 616d520
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/docs/framework/react/guides/reusable-fields.md b/docs/framework/react/guides/reusable-fields.md
@@ -18,7 +18,7 @@ export default function GenericTextField<
   TFormValidator extends Validator<TForm, unknown> | undefined,
 >({ name, form }: {
   name: TName;
-  form: ReturnType<typeof useForm<TForm, TFormValidator>
+  form: UseFormReturnType<TForm, TFormValidator>,
 > }): JSX.Element {
   return (
     <form.Field name={name}>
@@ -62,11 +62,11 @@ import {  useForm, Validator, InferValidFormKeys } from '@tanstack/react-form';
 
 export default function GenericTextField<
   TForm,
+  TFormValidator
   TName extends InferValidFormKeys<TForm, string>,
-  TFormValidator extends Validator<TForm, unknown> | undefined,
 >({ name, form }: {
   name: TName;
-  form: ReturnType<typeof useForm<TForm, TFormValidator>
+  form: UseFormReturnType<TForm, TFormValidator>
 > }): JSX.Element {
   return (
     <form.Field name={name}>

diff --git a/packages/react-form/src/types.ts b/packages/react-form/src/types.ts
@@ -5,6 +5,7 @@ import type {
   Validator,
 } from '@tanstack/form-core'
 import type { FunctionComponent } from 'react'
+import { useForm } from './useForm'
 
 /**
  * The field options.
@@ -28,3 +29,12 @@ export type UseFieldOptions<
 > & {
   mode?: 'value' | 'array'
 }
+
+/**
+ * The return type use useForm with pre-populated generics
+ */
+export type UseFormReturnType<TForm, TFormValidator> = TFormValidator extends
+  | Validator<TForm, unknown>
+  | undefined
+  ? ReturnType<typeof useForm<TForm, TFormValidator>>
+  : never