reactjs - Cum să conectezi react-hook-form, react-select și yup în TypeScript?

Există documentație despre cum pot face aceste trei biblioteci să funcționeze împreună? Până acum am găsit doar react-hook-form și react-select împreună, dar nu cu validarea yup. Mulțumesc.

Răspuns #1

Pentru a folosi react-select cu tipuri, instalează @types/react-select. Poți vedea secțiunile Integrating with UI libraries și Schema Validation pentru exemple despre cum să integrezi RHF cu react-select și yup, fă clic pe butonul TS pentru a vedea exemplele de cod și Codesandbox-urile live în TypeScript.

Mai jos este exemplul cu react-select și yup pentru a vă începe:

interface IFormInputs {
  firstName: string;
  iceCreamType: { label: string; value: string };
}

const SignupSchema = yup
  .object({
    firstName: yup.string().required(),
    iceCreamType: yup.object().shape({
      label: yup.string().required(),
      value: yup.string().required()
    })
  })
  .required();

function App() {
  const {
    register,
    handleSubmit,
    control,
    formState: { errors }
  } = useForm<IFormInputs>({
    resolver: yupResolver(SignupSchema)
  });

  const onSubmit = (data: IFormInputs) => {
    alert(JSON.stringify(data, null, 4));
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>First Name</label>
        <input {...register("firstName")} />
        {errors.firstName && <p>{errors.firstName.message}</p>}
      </div>
      <Controller
        name="iceCreamType"
        control={control}
        render={({ field }) => {
          return (
            <Select
              {...field}
              options={[
                { value: "chocolate", label: "Chocolate" },
                { value: "strawberry", label: "Strawberry" },
                { value: "vanilla", label: "Vanilla" }
              ]}
            />
          );
        }}
      />
      {errors.iceCreamType && <p>{errors.iceCreamType.label?.message}</p>}
      <input type="submit" />
    </form>
  );
}

Demonstrație live