fix: remove form.Form for headless form.getFormProps()

Author: tannerlinsley

docs/framework/react/reference/formApi.md

@@ -8,9 +8,9 @@ title: Form API
 When using `@tanstack/react-form`, the [core form API](../../reference/formApi) is extended with additional methods for React-specific functionality:
 
 - ```tsx
-  Form: FormComponent
+  getFormProps: () => FormProps
   ```
-  - A pre-bound and type-safe form component, specific to this forms instance.
+  - A function that returns props for the form element.
 - ```tsx
   Field: FieldComponent<TFormData>
   ```

docs/framework/react/reference/useForm.md

@@ -32,14 +32,3 @@ A type representing a form component.
 
 - `(props: FormProps) => any`
   - A function that takes `FormProps` as an argument and returns a form component.
-
-### `createFormComponent`
-
-```tsx
-export function createFormComponent(formApi: FormApi<any>): FormComponent
-```
-
-A function that creates a form component with the provided form API instance.
-
-- `formApi`
-  - An instance of the `FormApi<any>` class.

examples/react/simple/src/index.tsx

@@ -45,7 +45,7 @@ export default function App() {
     <div>
       <h1>Simple Form Example</h1>
       {/* A pre-bound form component */}
-      <form.Form>
+      <form {...form.getFormProps()}>
         <div>
           {/* A type-safe and pre-bound field component*/}
           <form.Field

packages/react-form/src/index.ts

@@ -22,7 +22,7 @@ export type {
 
 export { FormApi, FieldApi, functionalUpdate } from '@tanstack/form-core'
 
-export type { FormComponent, FormProps } from './useForm'
+export type { FormProps } from './useForm'
 export { useForm } from './useForm'
 
 export type { UseField, FieldComponent } from './useField'

packages/react-form/src/useForm.tsx

@@ -6,14 +6,16 @@ import React from 'react'
 import { type UseField, type FieldComponent, Field, useField } from './useField'
 import { formContext } from './formContext'
 
+export type FormSubmitEvent = React.FormEvent<HTMLFormElement>
+
 declare module '@tanstack/form-core' {
   interface Register {
-    FormSubmitEvent: React.FormEvent<HTMLFormElement>
+    FormSubmitEvent: FormSubmitEvent
   }
 
   // eslint-disable-next-line no-shadow
   interface FormApi<TFormData> {
-    Form: FormComponent
+    getFormProps: () => FormProps
     Field: FieldComponent<TFormData, TFormData>
     useField: UseField<TFormData>
     useStore: <TSelected = NoInfer<FormState<TFormData>>>(
@@ -28,12 +30,22 @@ declare module '@tanstack/form-core' {
   }
 }
 
+export type FormProps = {
+  onSubmit: (e: FormSubmitEvent) => void
+  disabled: boolean
+}
+
 export function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {
   const [formApi] = React.useState(() => {
     // @ts-ignore
     const api = new FormApi<TData>(opts)
 
-    api.Form = createFormComponent(api)
+    api.getFormProps = () => {
+      return {
+        onSubmit: formApi.handleSubmit,
+        disabled: api.state.isSubmitting,
+      }
+    }
     api.Field = Field as any
     api.useField = useField as any
     api.useStore = (
@@ -57,38 +69,8 @@ export function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {
     return api
   })
 
+  formApi.useStore((state) => state.isSubmitting)
   formApi.update(opts)
 
   return formApi as any
 }
-
-export type FormProps = React.HTMLProps<HTMLFormElement> & {
-  children: React.ReactNode
-  noFormElement?: boolean
-}
-
-export type FormComponent = (props: FormProps) => any
-
-function createFormComponent(formApi: FormApi<any>) {
-  const Form: FormComponent = ({ children, noFormElement, ...rest }) => {
-    const isSubmitting = formApi.useStore((state) => state.isSubmitting)
-
-    return (
-      <formContext.Provider value={{ formApi }}>
-        {noFormElement ? (
-          children
-        ) : (
-          <form
-            onSubmit={formApi.handleSubmit}
-            disabled={isSubmitting}
-            {...rest}
-          >
-            {children}
-          </form>
-        )}
-      </formContext.Provider>
-    )
-  }
-
-  return Form
-}