react-hook-multistep-form

A user-friendly and flexible multi-step form component for React, powered by react-hook-form for validation. Divide your form into steps, with each step containing one or more fields.

Installation

You can install this package via npm:

1npm install react-hook-multistep-form

Quick Start

To quickly set up a multi-step form using this package, follow these steps:

Import the necessary dependencies in your React component:

1import ReactHookMultiStepForm from "react-hook-multistep-form";
2import "./App.css";

Define your form structure with an array of questions. Each question can have various input types, such as text, select, radio, and checkbox. Specify the question's label, type, options (if applicable), and other properties:

1const data = [
2  {
3    label: "Question 1",
4    type: "text",
5    required: true,
6    placeholder: "Enter your answer",
7    name: "question1",
8  },
9  {
10    label: "Question 2",
11    type: "select",
12    options: [
13      { label: "Option 1", value: "option1" },
14      { label: "Option 2", value: "option2" },
15    ],
16    required: true,
17    placeholder: "Select an option",
18    name: "question2",
19  },
20  // ... Add more questions as needed
21];
22

Create a function to handle form submission. This function will receive the form data, similar to how you'd handle it with react-hook-form:

1const handleSubmitForm = (formData) => {
2  // Handle form data, e.g., submit it to your backend or perform any other actions.
3};

Render the ReactHookMultiStepForm component, passing in your questions and the handleSubmitForm function as props:

1return (
2  <div>
3    <ReactHookMultiStepForm questions={data} handleSubmitForm={handleSubmitForm} />
4  </div>
5);
6

Now you have a multi-step form ready to use in your application. Users can fill out each step one by one, and when they complete the form, the handleSubmitForm function will receive the collected data.