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
arete
arete2y ago
heres the example
JulieCezar
JulieCezar2y ago
Don't know if it helps but this is RHF with React select:
<Controller
name={"selectedSubject"}
control={control}
render={({ field }) => {
return (
<Select
options={ getSubjects?.data === undefined ? [] : getSubjects.data }
id={`SubjectSelect`}
instanceId={`SubjectSelect`}
{...field}
isMulti={false}
isLoading={getSubjects?.isLoading}
className="block w-full rounded-lg text-sm text-gray-900 focus:border-orange-[600] focus:ring-orange-[600]"
/>
);
}}
/>
<Controller
name={"selectedSubject"}
control={control}
render={({ field }) => {
return (
<Select
options={ getSubjects?.data === undefined ? [] : getSubjects.data }
id={`SubjectSelect`}
instanceId={`SubjectSelect`}
{...field}
isMulti={false}
isLoading={getSubjects?.isLoading}
className="block w-full rounded-lg text-sm text-gray-900 focus:border-orange-[600] focus:ring-orange-[600]"
/>
);
}}
/>
Just remember if you have components you will need tp wrap everything in the FormProvider And then use the FormContext in those components
JulieCezar
JulieCezar2y ago
useFormContext
Performant, flexible and extensible forms with easy-to-use validation.
arete
arete2y ago
but what if i just want to use only 1 input, should i still use the form provider or only use the controller?
JulieCezar
JulieCezar2y ago
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.
jairrard
jairrard2y ago
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 -
<TextInput
{...register("email", { required: true, pattern: /^\S+@\S+$/i })}
label="Email"
placeholder="[email protected]"
/>
<TextInput
{...register("email", { required: true, pattern: /^\S+@\S+$/i })}
label="Email"
placeholder="[email protected]"
/>
The props for TextInput are
type Props = {
type?: React.HTMLInputTypeAttribute;
value?: string;
onChange?: React.ChangeEventHandler<HTMLInputElement>;
onBlur?: React.FocusEventHandler<HTMLInputElement>;
name: string;
id?: string;
label?: string;
placeholder?: string;
htmlFor?: string;
error?: boolean;
helperText?: string | false | undefined;
onKeyDown?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
min?: number | string;
max?: number | string;
disabled?: boolean;
// rules?: RegisterOptions;
};
type Props = {
type?: React.HTMLInputTypeAttribute;
value?: string;
onChange?: React.ChangeEventHandler<HTMLInputElement>;
onBlur?: React.FocusEventHandler<HTMLInputElement>;
name: string;
id?: string;
label?: string;
placeholder?: string;
htmlFor?: string;
error?: boolean;
helperText?: string | false | undefined;
onKeyDown?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
min?: number | string;
max?: number | string;
disabled?: boolean;
// rules?: RegisterOptions;
};
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!
praskoo
praskoo2y ago
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:
const TextInput = React.forwardRef<HTMLInputElement, Props>(function TextInput(props, ref) {
return <input ref={ref} {...props} />
})
const TextInput = React.forwardRef<HTMLInputElement, Props>(function TextInput(props, ref) {
return <input ref={ref} {...props} />
})
Want results from more Discord servers?
Add your server