react + react hooks form + yup + typescript를 사용하여 재사용 가능한 폼 컴포넌트

소개

이 게시물은 양식 데이터, 제출 및 유효성 검사를 관리하는 반응 후크 양식을 사용하여 입력 및 선택과 같은 기본 요소로 간단한 양식을 작성하는 데 도움이 됩니다. 이 게시물이 끝날 때까지 다음 구문을 사용하여 재사용 가능한 구성 요소를 만들 것입니다.

<Form>
 <Input name="email" type="email" />
 <Input name="password" type="password" />
</Form>

React 후크 양식이란 무엇입니까?

사용하기 쉬운 유효성 검사로 성능이 뛰어나고 유연하며 확장 가능한 양식을 구축하기 위한 라이브러리입니다. 자세한 내용은 Official Website을 확인하십시오.

응?

Yup은 값 구문 분석 및 유효성 검사를 위한 간단한 JavaScript 스키마 빌더입니다.

동기 부여

나는 특히 typescript를 사용하여 반응 후크 양식을 위한 재사용 가능한 구성 요소에 대한 많은 리소스를 온라인에서 찾지 못했습니다. 몇 시간 만에 만든 것을 공유하기 위해 이 블로그 게시물을 작성했습니다. 아래 개선 사항에 대해 자유롭게 의견을 말하십시오.

전제 조건

이 라이브러리를 반응 및 반응 기반 프레임워크(예: NextJS, GatsbyJS 및 반응 네이티브)에서 사용할 수 있습니다. 나는 create-react-app을 사용하여 부트스트랩된 간단한 타이프스크립트 프로젝트를 사용할 것입니다.

npx create-react-app my-app --template typescript

설치

npm install --save react-hook-form @hookform/resolvers yup

빌드하자

구성 요소 2개 만들기

├── src/
├── components
    ├── Form.tsx
    ├── Input.tsx
    ├── Usage.tsx

Form.tsx

이 구성 요소를 간단한 양식 래퍼로 사용합니다.

import React, { FC, createElement } from "react";
import { ReactNode } from "react";

export type classNameType = string;
export type childrenType = ReactNode;

export interface IFormProps {
  defaultValues?: any;
  children?: childrenType;
  buttonLabel?: string;
  onSubmit?: any;
  handleSubmit?: any;
  register?: any;
  className?: classNameType;
}

const Form: FC<IFormProps> = ({
  defaultValues,
  buttonLabel = "Submit",
  children,
  onSubmit,
  handleSubmit,
  register,
  ...rest
}) => {
  return (
    <form onSubmit={handleSubmit(onSubmit)} {...rest}>
      <div className="d-flex justify-content-center fields__email">
        {Array.isArray(children)
          ? children.map((child) => {
              return child.props.name
                ? createElement(child.type, {
                    ...{
                      ...child.props,
                      register,
                      key: child.props.name
                    }
                  })
                : child;
            })
          : children}
      </div>
      <button className="btn btn--brand">{buttonLabel}</button>
    </form>
  );
};

export default Form;

입력.tsx

모든 입력 요소(텍스트, 비밀번호, 이메일 등)에 이 구성 요소를 사용합니다.

import React, { FC, InputHTMLAttributes } from "react";

interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
  name: string;
  label?: string;
  error?: string;
  register?: any;
  wrapperClass?: string;
  className?: string;
}

const Input: FC<InputProps> = ({
  register,
  name,
  error,
  label,
  wrapperClass,
  ...rest
}) => {
  return (
    <div className={wrapperClass}>
      {label && <label htmlFor={name}>{label}</label>}
      <input
        aria-invalid={error ? "true" : "false"}
        {...register(name)}
        {...rest}
      />
      {error && <span role="alert">{error}</span>}
    </div>
  );
};

export default Input;

사용법.tsx

위의 구성 요소는 다음과 같이 응용 프로그램에서 사용할 수 있습니다.

import React from "react";
import Form from "./Form";
import Input from "./Input";
import * as yup from "yup";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";

// interface for form
interface EmailInterface {
  email: string;
  password: string;
}

// validation
const EmailSchema = yup.object().shape({
  email: yup
    .string()
    .email("Enter a valid email")
    .required("Email is required"),
  password: yup
    .string()
    .max(32, "Max password length is 32")
    .required("Password is required")
});

const Usage = () => {
  const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm({ resolver: yupResolver(EmailSchema) });

  const onSubmit = (data: EmailInterface) => console.log(data);
  return (
    <Form
      buttonLabel="Change Email"
      register={register}
      handleSubmit={handleSubmit}
      onSubmit={onSubmit}
      className="change-form"
    >
      <Input
        name="email"
        type="email"
        placeholder="Enter your email"
        error={errors.email?.message}
        autoFocus
      />
      <Input
        name="password"
        type="password"
        placeholder="Password"
        error={errors.password?.message}
      />
    </Form>
  );
};

export default Usage;

축하해요! 반응 후크 양식, yup 및 typescript를 사용하여 재사용 가능한 입력 구성 요소를 성공적으로 만들었습니다. 다음은 codesandbox의 동일한 프로젝트입니다. 자유롭게 확인하십시오.