TanStackT
TanStack11mo ago
9 replies
colossal-harlequin

Submit form not working

I'm creating my own package for the form.

index.tsx
import { createFormHook } from '@tanstack/react-form'
import { fieldContext, formContext, useFormContext } from './hooks/context'
import { TextField } from './components/Textfield'

function SubscribeButton({ label }: { label: string }) {
  const form = useFormContext()
  return (
    <form.Subscribe
      selector={(state) => [state.canSubmit, state.isSubmitting]}
      children={([canSubmit, isSubmitting]) => (
        <>
          <button type="submit" disabled={!canSubmit}>
            {isSubmitting ? '...' : label}
          </button>          
        </>
      )}
    />
  )
}

export const { useAppForm: useForm, withForm } = createFormHook({
  fieldComponents: {
    TextField,
  },
  formComponents: {
    SubscribeButton,
  },
  fieldContext,
  formContext,
})


context.tsx
import { createFormHookContexts } from '@tanstack/react-form'

export const { fieldContext, useFieldContext, formContext, useFormContext } = createFormHookContexts();
Was this page helpful?