shadcn ui and react hook form
i really like the reusable component created by shad and trying to implement it with react hook form can someone here know how to implement them, especially with the <Select> component
thankss
7 Replies
heres the example
Don't know if it helps but this is RHF with React select:
Just remember if you have components you will need tp wrap everything in the FormProvider
And then use the FormContext in those components
useFormContext
Performant, flexible and extensible forms with easy-to-use validation.
but what if i just want to use only 1 input, should i still use the form provider or only use the controller?
If that input is in the same file as your form then you can just use the controller
If it's a separate component then you need the formContext
As far as I know, form provider is used exactly for that, similar to React's ContextProvider. You wrap all children with the Provider and then you can access it from within them.
I am trying something similar where I have my own component library and need to pass the {...register(name, rules)} from my Form component down to my custom reusable inputs.
I am getting the error
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
when I try to do the following -
The props for TextInput
are
I'm sure there are some mistakes in the props which I'd be happy to get some feedback on. But would really appreciate some help with using react-hook-form with custom reusable components!The documentation here should help you understand the error message: https://react.dev/learn/manipulating-the-dom-with-refs
In particular the "Accessing another component's DOM nodes" part
Basically, when you add
{...register(..)}
to props, one of the props that it will try to pass down is ref
But that ref
needs to be passed down to the inner <input>
that's within your <TextInput>
component (presumably). To do that, you need to use React.forwardRef
Your TextInput component should look a bit like this by the end: