Theo's Typesafe Cult•2y ago

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•2y ago

heres the example

message.txt

JulieCezar•2y 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•2y ago

https://react-hook-form.com/api/useformcontext/

useFormContext

Performant, flexible and extensible forms with easy-to-use validation.

arete•2y 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•2y 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•2y 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="richard@piedpiper.com"
/>

<TextInput
  {...register("email", { required: true, pattern: /^\S+@\S+$/i })}
  label="Email"
  placeholder="richard@piedpiper.com"
/>

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•2y 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} /> 
})

Gaming

Programming

shadcn ui and react hook form