forge42dev / remix-hook-form

Open source wrapper for react-hook-form aimed at Remix.run
MIT License
353 stars 29 forks source link

Compatibility with Shadcn #120

Open vanities opened 10 hours ago

vanities commented 10 hours ago

Does this package have compatibility with shadcn? I was looking through the issues, but didn't see anything regarding that.

For example, something like this:

import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "~/components/ui/form";

...
            <Form {...form}>
              <form
                onSubmit={form.handleSubmit}
                method="POST"
                className="space-y-6"
              >
...

etc. gives the error:

Type '{ children: Element; handleSubmit: (e?: any) => Promise<void>; reset: (values?: { otp: string; } | { otp?: string | undefined; } | undefined, options?: Partial<{ keepDirtyValues: boolean; ... 9 more ...; keepSubmitCount: boolean; }> | undefined) => void; ... 12 more ...; setFocus: UseFormSetFocus<...>; }' is not assignable to type 'UseFormReturn<{ otp: string; }, any, undefined>'.
  The types returned by 'handleSubmit(...)' are incompatible between these types.
    Type 'Promise<void>' is not assignable to type '(e?: any) => Promise<void>'.
      Type 'Promise<void>' provides no match for the signature '(e?: any): Promise<void>'.

It's probably that I'm misusing this library.

ArvidAnderson commented 9 hours ago

From my experience, basic components like Input and Select from shadcn/ui work fine, but you can't use their specific form components as shown in your snippet. I've had success following the Remix hook form documentation instead of using shadcn/ui's form components directly.