Paste with react-hook-form

[GiantRobots]

After the DSYS team updated input boxes to not require the value field so we can use uncontrolled inputs I decided to write an example app of 4 different ways of doing form state. Standard Usestate calls, react-hook-form raw, react-hook-form with a helper, and react-hook-form using the controlled component methodology. I've attached the project below it should work with a quick npm install and npm run dev

I did notice that the react-fast technology while running development mode didn't work quite right with the refs and so maybe there is an issue either in paste or the implementation of react-hook-form. (haven't done the due diligence to figure it out) so that's something to eyeball/consider if you're going to use this form handling methodology.

This video shows the various ways that it handles user input as well as the re-rendering properties of the library without many optimizations.

Screen.Recording.2021-02-05.at.4.29.00.PM.mov

formtest.zip

The majority of the code that I wrote if you don't wan't to grab the zipfile.

import {
  Box,
  BoxProps,
  Button,
  Card,
  Column,
  Grid,
  Heading,
  HelpText,
  Label,
} from "@twilio-paste/core";
import { Input } from "@twilio-paste/input";
import Head from "next/head";
import React, { FC, useState } from "react";
import { useForm, Controller, DeepMap, FieldError } from "react-hook-form";

const InputBox: FC<BoxProps> = (args) => (
  <Box marginBottom="space80" {...args} />
);

interface InputFormProps {
  name: string;
  label: string;
  required?: boolean;
  errors?: DeepMap<Record<string, any>, FieldError>;
}

const InputForm = React.forwardRef<HTMLInputElement, InputFormProps>(
  ({ name, label, errors, required = false }, ref) => {
    return (
      <>
        <Label htmlFor={name}>{label}</Label>
        <Input
          type="text"
          id={name}
          name={name}
          ref={ref}
          required={required}
          hasError={errors[name]}
        />
        {errors[name] && (
          <HelpText variant="error">{errors[name].message}</HelpText>
        )}
      </>
    );
  }
);

// Use react-hook-form with a Handy Dandy Helper
const Form1: React.FC = () => {
  const { register, handleSubmit, watch, errors, control } = useForm();
  const onSubmit = (data) => console.log("Form 1", data);

  return (
    <Card>
      <form onSubmit={handleSubmit(onSubmit)} noValidate>
        <InputBox>
          <InputForm
            label="Name"
            name="name1"
            errors={errors}
            ref={register({ required: "Name is required" })}
            required
          />
        </InputBox>
        <InputBox>
          <InputForm
            label="Phone Number"
            name="PhoneNumber1"
            errors={errors}
            required
            ref={register({ required: "Phone Number Required" })}
          />
        </InputBox>
        <InputBox>
          <Button type="submit" variant="primary">
            Submit
          </Button>
        </InputBox>
      </form>
    </Card>
  );
};

// Use UseState form
const UseStateForm: React.FC = () => {
  // Too lazy to write error/validation logic here
  const [name, setName] = useState("");
  const [nameError, setNameError] = useState<boolean>(false);

  const [phoneNumber, setPhoneNumber] = useState("");
  const [phoneNumberError, setPhoneNumberError] = useState<boolean>(false);

  const resetErrors = () => {
    setNameError(null);
    setPhoneNumberError(null);
  };

  const onSubmit = (e) => {
    console.log("UseStateForm", name, phoneNumber);

    e.preventDefault();

    resetErrors();
    console.log("stuff");

    if (name === "") {
      setNameError(true);
    }

    if (phoneNumber === "") {
      setPhoneNumberError(true);
    }

    if (phoneNumberError || nameError) {
      return false;
    }
    return false;
  };

  return (
    <Card>
      <form onSubmit={(e) => onSubmit(e)} noValidate>
        <InputBox>
          <Label htmlFor="name4" required>
            Name
          </Label>
          <Input
            type="text"
            id="name4"
            name="name4"
            onChange={(e) => {
              setName(e.currentTarget.value);
            }}
            value={name}
            required
            hasError={nameError}
          />
          {nameError && (
            <HelpText variant="error">Name is required Yo</HelpText>
          )}
        </InputBox>

        <InputBox>
          <Label htmlFor="phoneNumber4" required>
            Phone Number
          </Label>
          <Input
            type="text"
            id="phoneNumber4"
            name="phoneNumber4"
            onChange={(e) => {
              setPhoneNumber(e.currentTarget.value);
            }}
            value={phoneNumber}
            required
            hasError={phoneNumberError}
          />
          {phoneNumberError && (
            <HelpText variant="error">Phone number is required yo</HelpText>
          )}
        </InputBox>
        <InputBox>
          <Button type="submit" variant="primary">
            Submit
          </Button>
        </InputBox>
      </form>
    </Card>
  );
};

// Use React form without the helper
const Form2: React.FC = () => {
  const { register, handleSubmit, watch, errors, control } = useForm();
  const onSubmit = (data) => console.log("Form 2", data);

  return (
    <Card>
      <form onSubmit={handleSubmit(onSubmit)} noValidate>
        <InputBox>
          <Label htmlFor="name2" required>
            Name
          </Label>
          <Input
            type="text"
            id="name2"
            name="name2"
            ref={register({ required: "This Be Req'd" })}
            hasError={errors.name2}
          />
          {errors.name2 && (
            <HelpText variant="error">{errors.name2.message}</HelpText>
          )}
        </InputBox>
        <InputBox>
          <Label htmlFor="HeartAttack" required>
            Heart Attack
          </Label>
          <Input
            type="text"
            id="phoneNumber2"
            name="phoneNumber2"
            ref={register({ required: "This Be Req'd" })}
            hasError={errors.phoneNumber2}
          />
          {errors.phoneNumber2 && (
            <HelpText variant="error">{errors.phoneNumber2.message}</HelpText>
          )}
        </InputBox>
        <InputBox>
          <Button type="submit" variant="primary">
            Submit
          </Button>
        </InputBox>
      </form>
    </Card>
  );
};

// Use React form with the controller
const Form3: React.FC = () => {
  const { register, handleSubmit, watch, errors, control } = useForm();
  const onSubmit = (data) => console.log("Form 3", data);

  return (
    <Card>
      <form onSubmit={handleSubmit(onSubmit)}>
        <InputBox>
          <Label htmlFor="Name" required>
            Name
          </Label>

          <Controller
            id="Name4"
            name="Name4"
            control={control}
            rules={{ required: "Yo this is very required" }}
            defaultValue=""
            render={(props) => {
              const hasError = errors.Name4;

              return (
                <>
                  <Input
                    id="Name4"
                    name="Name4"
                    type="text"
                    value={props.value}
                    onChange={props.onChange}
                    hasError={hasError}
                  />
                  {hasError && (
                    <HelpText variant="error">{errors.Name4.message}</HelpText>
                  )}
                </>
              );
            }}
          />
        </InputBox>
        <InputBox>
          <Label htmlFor="PhoneNumber" required>
            PhoneNumber
          </Label>

          <Controller
            id="PhoneNumber4"
            name="PhoneNumber4"
            control={control}
            rules={{ required: "Yo this is very required" }}
            defaultValue=""
            render={(props) => {
              const hasError = errors.PhoneNumber4;

              return (
                <>
                  <Input
                    id="PhoneNumber4"
                    name="PhoneNumber4"
                    type="text"
                    value={props.value}
                    onChange={props.onChange}
                    hasError={hasError}
                  />
                  {hasError && (
                    <HelpText variant="error">
                      {errors.PhoneNumber4.message}
                    </HelpText>
                  )}
                </>
              );
            }}
          />
        </InputBox>
        <InputBox>
          <Button type="submit" variant="primary">
            Submit
          </Button>
        </InputBox>
      </form>
    </Card>
  );
};

export default function Home() {
  return (
    <div>
      <Head>
        <title>React Form Hook Test</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <Grid>
          <Column span={6} offset={3}>
            <Heading as="h1" variant="heading10">
              FOOORMZ
            </Heading>

            <InputBox>
              <Heading as="h3" variant="heading30">
                useState
              </Heading>
              <UseStateForm />
            </InputBox>

            <InputBox>
              <Heading as="h3" variant="heading30">
                Form 1 (React Hooks + Helper)
              </Heading>
              <Form1 />
            </InputBox>

            <InputBox>
              <Heading as="h3" variant="heading30">
                Form 2 Naked react-hook-form
              </Heading>
              <Form2 />
            </InputBox>

            <InputBox>
              <Heading as="h3" variant="heading30">
                Form 3 react-hook-form with controller <br />
                (Only viable option for pre 1.2.2)
              </Heading>
              <Form3 />
            </InputBox>
          </Column>
        </Grid>
      </main>

      <footer></footer>
    </div>
  );
}

[katieporter]

Hey @GiantRobots - thanks for sharing this! Seems awesome. If you're willing, we'd love to see this in a codesandbox so it's easier to share and folks who aren't as comfortable running a local env can still play with it.

[GiantRobots]

https://codesandbox.io/s/paste-react-hook-form-demos-rfchr?file=/src/App.tsx

[katieporter]

Thanks for putting this into a code sandbox! The interaction patterns are really nice. I've shared this with our eng team too so they can take a look at how you've built this.

[uditadhikari117]

Hi folks,
We were looking for an error behavior similar to this. Is this part of the Paste input now or should we implement something similar to the shared code?

[SiTaggart]

Hi, form validation is up to the consumer still at the moment. We only provide the presentational components.

You are free to wire them up to any validation library you like.