How to use @hookform/resolvers - 6 common examples

To help you get started, we’ve selected a few @hookform/resolvers examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github lyft / clutch / frontend / packages / core / src / Table / metadata-table.tsx View on Github external
} else {
    rows = data.map(row => {
      const id = row?.input?.key || _.camelCase(row.name);
      return { ...row, id };
    });
  }

  const validationShape = {};
  rows.forEach(row => {
    if (row?.input?.validation) {
      validationShape[row.name] = row.input.validation;
    }
  });
  const validation = useForm({
    mode: "onChange",
    resolver: yupResolver(object().shape(validationShape)),
  });
  const { control, handleSubmit } = validation;

  React.useEffect(() => {
    setOnSubmit(handleSubmit);
  }, []);

  return (
    <TableContainer data-max-height={maxHeight}>
      {process.env.REACT_APP_DEBUG_FORMS && onUpdate !== undefined && <DevTool control={control} />}
      <Table>
        <TableBody>
          {rows.map((row: IdentifiableRowData) => {
            return row.input !== undefined && onUpdate ? (
              <MutableRow
                data={row}
github lyft / clutch / frontend / workflows / serverexperimentation / src / start-experiment.tsx View on Github external
},
  ] as FormItem[];

  const schema: { [name: string]: yup.StringSchema | yup.NumberSchema } = {};
  const visibleFields = fields.filter(field => field.visible !== false);
  visibleFields
    .filter(field => field.validation !== undefined)
    .reduce((accumulator, field) => {
      accumulator[field.name] = field.validation;
      return accumulator;
    }, schema);

  const { register, errors, handleSubmit } = useForm({
    mode: "onChange",
    reValidateMode: "onChange",
    resolver: yupResolver(yup.object().shape(schema)),
  });

  return (
    <Form onSubmit={handleSubmit(handleOnSubmit)}>
      <FormFields
        state={experimentDataState}
        items={visibleFields}
        register={register}
        errors={errors}
      />
      <ButtonGroup>
        <Button text="Cancel" variant="neutral" onClick={handleOnCancel} />
        <Button text="Start" type="submit" />
      </ButtonGroup>
    </Form>
  );
github lyft / clutch / frontend / workflows / serverexperimentation / src / start-experiment.tsx View on Github external
},
  ] as FormItem[];

  const schema: { [name: string]: yup.StringSchema | yup.NumberSchema } = {};
  const visibleFields = fields.filter(field => field.visible !== false);
  visibleFields
    .filter(field => field.validation !== undefined)
    .reduce((accumulator, field) => {
      accumulator[field.name] = field.validation;
      return accumulator;
    }, schema);

  const { register, errors, handleSubmit } = useForm({
    mode: "onChange",
    reValidateMode: "onChange",
    resolver: yupResolver(yup.object().shape(schema)),
  });

  return (
    <Form onSubmit={handleSubmit(handleOnSubmit)}>
      <FormFields
        state={experimentDataState}
        items={visibleFields}
        register={register}
        errors={errors}
      />
      <ButtonGroup>
        <Button text="Cancel" variant="neutral" onClick={handleOnCancel} />
        <Button text="Start" type="submit" />
      </ButtonGroup>
    </Form>
  );
github lyft / clutch / frontend / workflows / sourcecontrol / src / create-repository.tsx View on Github external
const RepositoryDetails: React.FC<WizardChild> = () => {
  const { register, errors, handleSubmit } = useForm({
    mode: "onChange",
    reValidateMode: "onChange",
    resolver: yupResolver(schema),
  });
  const { onSubmit } = useWizardContext();
  const repositoryData = useDataLayout("repositoryData");
  const repositoryOptions = repositoryData.displayValue()
    .data as IClutch.sourcecontrol.v1.GetRepositoryOptionsResponse;

  return (
    <WizardStep error={repositoryData.error} isLoading={repositoryData.isLoading}>
      <Form onSubmit={handleSubmit(onSubmit)}>
        <Select
          label="Owner"
          name="owner"
          onChange={value => repositoryData.updateData("owner", value)}
          options={repositoryOptions?.availableOwners?.map(owner => {
            return { label: owner.name, startAdornment: <AvatarIcon src={owner.photoUrl} /> };
          })}
github TheOdinProject / theodinproject / app / javascript / components / project-submissions / components / edit-form.jsx View on Github external
const EditForm = ({
  submission, onSubmit, onClose, onDelete,
}) => {
  const {
    register, errors, handleSubmit, formState,
  } = useForm({
    resolver: yupResolver(schema),
    defaultValues: {
      repo_url: submission.repo_url,
      live_preview_url: submission.live_preview_url,
      is_public: submission.is_public,
    },
  });

  const handleDelete = () => {
    onDelete(submission.id);
    onClose();
  };

  if (formState.isSubmitSuccessful) {
    return (
      <div className="text-center">
        <h1 className="accent">Thanks for Updating Your Solution!</h1>
github TheOdinProject / theodinproject / app / javascript / components / project-submissions / components / create-form.jsx View on Github external
const CreateForm = ({ onClose, onSubmit, userId }) => {
  const { lesson } = useContext(ProjectSubmissionContext);
  const {
    register, handleSubmit, formState, errors,
  } = useForm({
    resolver: yupResolver(schema),
    defaultValues: {
      is_public: true,
    },
  });

  if (userId === null) {
    return (
      <div className="text-center">
        <h1 className="bold">Please Sign in</h1>
        <p data-test-id="sign-in-instructions">
          Please
          {' '}
          <a href="/login">sign in</a>
          {' '}
          to add a project submission.
        </p>

@hookform/resolvers

React Hook Form validation resolvers: Yup, Joi, Superstruct, Zod, Vest, Class Validator, io-ts, Nope, computed-types and Typanion

MIT
Latest version published 1 month ago

Package Health Score

92 / 100
Full package analysis