From 524d024b3e873ad72a0cd2007f9ba1b3ef0727ea Mon Sep 17 00:00:00 2001
From: Harry Whorlow <harry.whorlow@technoly.com>
Date: Sun, 22 Dec 2024 17:15:16 +0100
Subject: [PATCH] fix(core): cleaned up generic slots

---
 docs/framework/react/guides/reusable-fields.md | 14 ++++++--------
 packages/react-form/src/types.ts               |  5 ++---
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/docs/framework/react/guides/reusable-fields.md b/docs/framework/react/guides/reusable-fields.md
index 9a41a8f12..ec1b12005 100644
--- a/docs/framework/react/guides/reusable-fields.md
+++ b/docs/framework/react/guides/reusable-fields.md
@@ -10,14 +10,13 @@ As TanStack form is a headless library, we provide you the core building blocks
 To create a reusable fields, you can do the following.
 
 ```tsx
-import {  InferValidFormKeys } from '@tanstack/react-form';
+import {  InferValidFormKeys, UseFormReturnType } from '@tanstack/react-form';
 
 export default function GenericTextField<
   TForm,
   TFormValidator
-  TName extends InferValidFormKeys<TForm, string>,
 >({ name, form }: {
-  name: TName;
+  name: InferValidFormKeys<TForm, string>;
   form: UseFormReturnType<TForm, TFormValidator>,
 > }): JSX.Element {
   return (
@@ -34,10 +33,10 @@ export default function GenericTextField<
 }
 ```
 
-In this setup the GenericTextField will only accept names of fields that have a valid value type, in this case a string, as shown here.
+With the InferValidFormKeys the GenericTextField component's name prop will only accept the names of fields that have a valid value type, in this case a string, as shown here.
 
 ```tsx
- TName extends InferValidFormKeys<TForm, string>,
+  name: InferValidFormKeys<TForm, string>;
 ```
 
 Deep values can also be inferred using this method from the parent form.
@@ -58,14 +57,13 @@ function App() {
 ## Full Example
 
 ```tsx
-import { InferValidFormKeys } from '@tanstack/react-form';
+import { InferValidFormKeys, UseFormReturnType } from '@tanstack/react-form';
 
 export default function GenericTextField<
   TForm,
   TFormValidator
-  TName extends InferValidFormKeys<TForm, string>,
 >({ name, form }: {
-  name: TName;
+  name: InferValidFormKeys<TForm, string>;
   form: UseFormReturnType<TForm, TFormValidator>
 > }): JSX.Element {
   return (
diff --git a/packages/react-form/src/types.ts b/packages/react-form/src/types.ts
index 790378120..9e96058d5 100644
--- a/packages/react-form/src/types.ts
+++ b/packages/react-form/src/types.ts
@@ -4,8 +4,7 @@ import type {
   FieldApiOptions,
   Validator,
 } from '@tanstack/form-core'
-import type { FunctionComponent } from 'react'
-import { useForm } from './useForm'
+import { ReactFormExtendedApi } from './useForm'
 
 /**
  * The field options.
@@ -36,5 +35,5 @@ export type UseFieldOptions<
 export type UseFormReturnType<TForm, TFormValidator> = TFormValidator extends
   | Validator<TForm, unknown>
   | undefined
-  ? ReturnType<typeof useForm<TForm, TFormValidator>>
+  ? ReactFormExtendedApi<TForm, TFormValidator>
   : never