Typesafety in FormAPI and FieldAPI for Shadcn Form Components

Hi @crutchcorn

Just following up from our convo — I’m the one working on the TanStack Forms + shadcn/ui integration. I’m mainly stuck with getting things fully type-safe, especially around FormAPI and FieldAPI.

example code:

const Form = React.forwardRef<
  HTMLFormElement, 
  {
    form: FormApi<any, any, any, any, any, any, any, any, any, any>,
    children: React.ReactNode
  } & React.HTMLAttributes<HTMLFormElement>
>(({ form, children, ...props }, ref) => {
  return (
    <form
      ref={ref}
      onSubmit={(e) => {
        e.preventDefault()
        e.stopPropagation()
        void form.handleSubmit()
      }}
      {...props}
    >
      {children}
    </form>
  )
})
Form.displayName = "Form"

const Form = React.forwardRef<
  HTMLFormElement, 
  {
    form: FormApi<any, any, any, any, any, any, any, any, any, any>,
    children: React.ReactNode
  } & React.HTMLAttributes<HTMLFormElement>
>(({ form, children, ...props }, ref) => {
  return (
    <form
      ref={ref}
      onSubmit={(e) => {
        e.preventDefault()
        e.stopPropagation()
        void form.handleSubmit()
      }}
      {...props}
    >
      {children}
    </form>
  )
})
Form.displayName = "Form"

const Form = React.forwardRef<
  HTMLFormElement, 
  {
    form: FormApi<any, any, any, any, any, any, any, any, any, any>,
    children: React.ReactNode
  } & React.HTMLAttributes<HTMLFormElement>
>(({ form, children, ...props }, ref) => {
  return (
    <form
      ref={ref}
      onSubmit={(e) => {
        e.preventDefault()
        e.stopPropagation()
        void form.handleSubmit()
      }}
      {...props}
    >
      {children}
    </form>
  )
})
Form.displayName = "Form"

const Form = React.forwardRef<
  HTMLFormElement, 
  {
    form: FormApi<any, any, any, any, any, any, any, any, any, any>,
    children: React.ReactNode
  } & React.HTMLAttributes<HTMLFormElement>
>(({ form, children, ...props }, ref) => {
  return (
    <form
      ref={ref}
      onSubmit={(e) => {
        e.preventDefault()
        e.stopPropagation()
        void form.handleSubmit()
      }}
      {...props}
    >
      {children}
    </form>
  )
})
Form.displayName = "Form"

Github URL: https://github.com/kulterryan/shadcn-tanstack-form/blob/main/src/components/ui/tanstack-form.tsx

GitHub

shadcn-tanstack-form/src/components/ui/tanstack-form.tsx at main ·...

Contribute to kulterryan/shadcn-tanstack-form development by creating an account on GitHub.

Typesafety in FormAPI and FieldAPI for Shadcn Form Components

Similar Threads

Similar Threads

Similar Threads