diff --git a/docs/framework/react/reference/formApi.md b/docs/framework/react/reference/formApi.md index 7b2d0e8..f22724c 100644 --- a/docs/framework/react/reference/formApi.md +++ b/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 ``` diff --git a/docs/framework/react/reference/useForm.md b/docs/framework/react/reference/useForm.md index bd4b3ea..9fe9d6e 100644 --- a/docs/framework/react/reference/useForm.md +++ b/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): FormComponent -``` - -A function that creates a form component with the provided form API instance. - -- `formApi` - - An instance of the `FormApi` class. diff --git a/examples/react/simple/src/index.tsx b/examples/react/simple/src/index.tsx index 9e5d8b7..8b6e70a 100644 --- a/examples/react/simple/src/index.tsx +++ b/examples/react/simple/src/index.tsx @@ -45,7 +45,7 @@ export default function App() {

Simple Form Example

{/* A pre-bound form component */} - +
{/* A type-safe and pre-bound field component*/} + declare module '@tanstack/form-core' { interface Register { - FormSubmitEvent: React.FormEvent + FormSubmitEvent: FormSubmitEvent } // eslint-disable-next-line no-shadow interface FormApi { - Form: FormComponent + getFormProps: () => FormProps Field: FieldComponent useField: UseField useStore: >>( @@ -28,12 +30,22 @@ declare module '@tanstack/form-core' { } } +export type FormProps = { + onSubmit: (e: FormSubmitEvent) => void + disabled: boolean +} + export function useForm(opts?: FormOptions): FormApi { const [formApi] = React.useState(() => { // @ts-ignore const api = new FormApi(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(opts?: FormOptions): FormApi { return api }) + formApi.useStore((state) => state.isSubmitting) formApi.update(opts) return formApi as any } - -export type FormProps = React.HTMLProps & { - children: React.ReactNode - noFormElement?: boolean -} - -export type FormComponent = (props: FormProps) => any - -function createFormComponent(formApi: FormApi) { - const Form: FormComponent = ({ children, noFormElement, ...rest }) => { - const isSubmitting = formApi.useStore((state) => state.isSubmitting) - - return ( - - {noFormElement ? ( - children - ) : ( - - {children} - - )} - - ) - } - - return Form -}