# 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.

Latest version **0.1.0** (published 2023-11-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-hook-multistep-form
pnpm add react-hook-multistep-form
yarn add react-hook-multistep-form
bun add react-hook-multistep-form
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2023-11-01 |
| First published | 2023-11-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 12 |
| Unpacked size | 10.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | appgenix-infotech |

## Links

- npm: https://www.npmjs.com/package/react-hook-multistep-form
- npm.io page: https://npm.io/package/react-hook-multistep-form

## Dependencies (12)

- [react](https://npm.io/package/react.md) ^18.2.0
- [bootstrap](https://npm.io/package/bootstrap.md) ^5.3.2
- [cross-env](https://npm.io/package/cross-env.md) ^7.0.3
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [web-vitals](https://npm.io/package/web-vitals.md) ^2.1.4
- [react-scripts](https://npm.io/package/react-scripts.md) 5.0.1
- [@babel/polyfill](https://npm.io/package/@babel/polyfill.md) ^7.12.1
- [react-bootstrap](https://npm.io/package/react-bootstrap.md) ^2.9.1
- [react-hook-form](https://npm.io/package/react-hook-form.md) ^7.47.0
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^13.4.0
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.17.0
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^13.5.0

## Recent versions

- 0.1.0 (latest) — 2023-11-01

## README

# 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:

```bash
npm 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:

```js
import ReactHookMultiStepForm from "react-hook-multistep-form";
import "./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:

```js
const data = [
  {
    label: "Question 1",
    type: "text",
    required: true,
    placeholder: "Enter your answer",
    name: "question1",
  },
  {
    label: "Question 2",
    type: "select",
    options: [
      { label: "Option 1", value: "option1" },
      { label: "Option 2", value: "option2" },
    ],
    required: true,
    placeholder: "Select an option",
    name: "question2",
  },
  // ... Add more questions as needed
];

```

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:

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

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

```js
return (
  <div>
    <ReactHookMultiStepForm questions={data} handleSubmitForm={handleSubmitForm} />
  </div>
);

```

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.

---
_Source: https://npm.io/package/react-hook-multistep-form · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._