react-hook-forms

info

react-hook-forms is a third-party software that facilitates working with HTML form elements in applications developed using React. It provides a way to handle form validation, submission, and state management.

Integration with DHL User Interface Library

The DHL User Interface Library does not employ react-hook-forms for its form elements. This documentation page does not encourage the adoption of react-hook-forms within the library. Instead, it showcases a simple, and possibly, limited use case of combining the library's own form element components with react-hook-forms.

For more information on how to use react-hook-forms and its capabilities, refer to the official documentation at https://react-hook-form.com/.

Example

This component, ReactHookFormTestPage, is a simple form page that uses the react-hook-form library for form handling. It includes a single input field for an email address and a submit button.

Import Statements

The component imports several hooks and components from react-hook-form and react libraries, as well as custom components and types from @dhl-official/react-library and @dhl-official/stencil-library.

Component Structure

The component is a functional component that uses the useForm hook from react-hook-form to manage form state. The form includes validation and error handling.

Form Handling

The useForm hook is initialized with a configuration object that sets the mode to "all" (meaning all fields are validated on every change) and sets the default values for the form fields.

The handleSubmit function from useForm is used to handle form submission. It takes two arguments: a callback function to be called on successful form submission (onValid), and a callback function to be called when form validation fails (onInvalid).

Form Fields

The form includes a single field, "email", which is managed by the Controller component from react-hook-form. The Controller is configured with validation rules (the field is required and must include an "@" symbol), and a render function that returns a DhlInputField component.

The DhlInputField component is a custom input field component from the @dhl-official/react-library. It is configured with a ref (emailInputRef), event handlers for change and blur events (onDhlChange and onDhlBlur), a value, a variant, and validation settings.

Error Handling

If form validation fails, the onInvalid function is called. This function retrieves the validation message from the DhlInputField component and sets it as the state of emailInputErrorMessage.

Submit Button

The form includes a submit button, which is a DhlButton component from the @dhl-official/react-library.

import {
  useForm,
  SubmitHandler,
  SubmitErrorHandler,
  Controller,
} from "react-hook-form";

import { DhlButton, DhlInputField } from "@dhl-official/react-library";
import { Variants } from "@dhl-official/stencil-library";
import { useRef, useState } from "react";

type InputDemo = {
  email: string;
};

const ReactHookFormTestPage = () => {
  const {
    handleSubmit,
    control,
    formState: { errors },
  } = useForm<InputDemo>({
    mode: "all",
    defaultValues: {
      email: "",
    },
  });

  const emailInputRef = useRef(null);
  const [emailInputErrorMessage, setEmailInputErrorMessage] = useState("");

  const onValid: SubmitHandler<InputDemo> = async (e) => {
    console.log(e);
    setEmailInputErrorMessage("");
  };

  const onInvalid: SubmitErrorHandler<InputDemo> = async (e) => {
    console.log(e);
    const error = await (
      emailInputRef?.current as unknown as HTMLDhlInputFieldElement
    ).getValidationMessage();

    setEmailInputErrorMessage(errors.email?.message || error);
  };

  return (
    <form onSubmit={handleSubmit(onValid, onInvalid)} noValidate>
      <Controller
        name="email"
        control={control}
        rules={{
          required: true,
          pattern: /@/i,
        }}
        render={({ field }) => (
          <DhlInputField
            ref={emailInputRef}
            onDhlChange={field.onChange}
            onDhlBlur={field.onBlur}
            value={field.value}
            variant={{
              label: "email",
              placeholder: "Email Placeholder",
              type: Variants.static,
            }}
            validation={{
              type: errors.email ? Variants.invalid : Variants.valid,
              message: errors.email ? emailInputErrorMessage : "",
            }}
            type="email"
            required
          ></DhlInputField>
        )}
      ></Controller>
      <hr />
      <DhlButton color="red" type="submit">
        SUBMIT
      </DhlButton>
    </form>
  );
};

export default ReactHookFormTestPage;