react-wizardry로 스마트 마법사 구축

소개

마법사는 순차적인 방식으로 사용자로부터 정보를 수집하는 훌륭한 방법입니다.

이 게시물에서는 react-wizardry 라이브러리를 사용하여 다단계 마법사를 빌드하는 방법을 살펴보겠습니다.

react-wizardry은 내장 유효성 검사로 다단계 양식을 구축하기 위해 Typescript로 구축된 완전히 새로운 반응 라이브러리입니다.

먼저 라이브러리를 설치하여 시작하겠습니다.

npm install react-wizardry

⚡페이지 설정

페이지는 react-wizardry 을(를) 사용하여 다단계 양식을 작성하는 데 핵심입니다.

각Page 개체는 마법사의 페이지를 나타냅니다. 모든 Page 객체에는 입력 필드를 구성하는 fields 배열이 있습니다.
pages 소품을 사용하여 마법사를 빌드해 보겠습니다.

<Wizard
  pages={[
    {
      title: "Page 1",
      fields: [
        {
          label: "First Name",
          name: "firstName",
          type: "text",
        },
        {
          label: "Last Name",
          name: "lastName",
          type: "text"
        },
      ]
    },
    {
      title: "Page 2",
      fields: [
        {
          label: "Date of Birth",
          name: "dob",
          type: "date"
        },
      ]
    },
    {
      title: "Page 3",
      fields: [
        {
          name: "salary",
          label: "Salary",
          type: "number"
        },
      ]
    },
  ]}
/>

마법사는 세 페이지로 구성되었습니다.

1페이지에는 이름과 성이라는 두 개의 필드가 있습니다.

생년월일은 2페이지의 유일한 필드이고 급여는 마지막 페이지의 유일한 필드입니다.

페이지는 페이지 배열에 지정된 순서대로 렌더링된다는 점을 기억하는 것이 중요합니다.

지금까지 UI가 어떻게 보이는지 살펴보겠습니다.

🔠 필드 유형

type 속성을 사용하면 입력 필드의 유형을 정의할 수 있습니다.

react-wizardy는 11가지 입력 유형을 지원합니다.
text , email , phone , number , password , textarea , select , checkbox , datetime , radio 및 file 는 지원되는 입력 유형입니다.

⚠️ 필드를 필수로 표시

다단계 양식을 작성할 때 다음 단계로 진행하기 전에 몇 가지 필수 정보를 수집하는 것이 중요합니다. 반응 마법사에서는 isRequired 속성을 통해 이를 달성할 수 있습니다.

필드를 필수로 지정하려면 사용자가 반드시 입력해야 하는 필드에 대해 trueisRequired를 설정하기만 하면 됩니다.

페이지 컬렉션에서 firstName 필드를 필수 항목으로 지정하겠습니다.

fields: [
  {
    label: "First Name",
    name: "firstName",
    type: "text"
    isRequired: true,
  },
  {
    label: "Last Name",
    name: "lastName",
    type: "text"
  }
]

필수 필드는 특별한 빨간색 별표 아이콘으로 표시되며 다음 버튼은 비활성화됩니다. 다음 버튼은 사용자가 필드 값을 채운 경우에만 활성화됩니다.

✅ 필드 검증

react-wizardry에서 지원되는 모든 입력 필드에는 이미 유효성 검사가 내장되어 있습니다. 필드가 isRequired 로 표시되면 유효성 검사가 기본적으로 켜집니다. 구성 요소는 필드 바로 옆에 좋은 오류 메시지를 표시하고 사용자가 문제를 해결하면 메시지가 사라집니다.

🎨 테마

라이브러리는 다양한 요소의 색상 변경을 세부적으로 지원합니다. 자세한 내용은 설명서를 확인하십시오.

다음은 어두운 테마의 마법사example입니다.

결론

우리가 살펴본 개념 외에도 react-wizardry은 RTL, 사용자 지정 검증 메시지, 사용자 지정 가능한 스테퍼 아이콘과 같은 기능을 즉시 제공합니다.

자세한 내용은 설명서를 확인하고 모든 코드 및 상자 샘플here을 살펴보십시오.

⭐ Star this project on Github

이 게시물이 마음에 드셨다면 제 다른 게시물open source projects도 마음에 드실 것입니다.

, Github에서 저를 팔로우하세요.