react-multistep-forms


Flexible and customizable multistep form context for React with native React Hook Form integration.

> ⚠️ Disclaimer: This package is currently under active development.
>
> react-multistep-forms is not yet a stable release and may contain bugs, incomplete features, or security vulnerabilities.
>
> Any developer or end user who downloads or uses this package acknowledges that the package author is not responsible for any data loss, system failure, security issues, or other problems that may arise from its use.
>
> By downloading or using this package, the developer or end user agrees that the author of this package is not liable for any direct, indirect, incidental, or consequential damages arising from its use. Use at your own risk.
>
> It is strongly recommended to thoroughly test the package before using it in any production environment.
>
> For bug reports or suggestions, please open an issue on GitHub Issues."

!React Multistep Forms Introduction

Installation

Install the package using npm:

``bash
npm install react-multistep-forms
`

Or using yarn:

`bash
yarn add react-multistep-forms
`

Basic Usage

Here's a simple example of how to use the multi-step form:

`jsx
import React from 'react';
import { FormProvider, useForm } from 'react-hook-form';
import {
MultistepForm,
MultistepFormProvider,
StepContainer,
Step,
ProgressBar,
StepControls,
NextButton,
PrevButton,
SubmitButton
} from 'react-multistep-forms';

function MyForm() {
const methods = useForm();

const handleSubmit = (data) => {
console.log('Form submitted:', data);
};

// Define which fields belong to which step
const stepFieldsMap = {
personalInfo: ['firstName', 'lastName'],
contactInfo: ['email', 'phone'],
addressInfo: ['address', 'city', 'zipCode']
};

return (

stepFieldsMap={stepFieldsMap}
onSubmit={handleSubmit}
>







| Prop | Type | Description |
|------|------|-------------|
| stepFieldsMap | Record | Maps step keys to field names for validation |
| onSubmit | () => void | Function called when the form is submitted |
| children | ReactNode | Child components |

$3

The main container for the multi-step form.

| Prop | Type | Description |
|------|------|-------------|
| children | ReactNode | Child components |
| className | string | CSS class for styling |

$3

Represents an individual step in the form.

| Prop | Type | Description |
|------|------|-------------|
| title | string | Title of the step |
| isValid | boolean | Whether the step is valid |
| children | ReactNode | Content of the step |
| className | string | CSS class for styling |
| hideTitle | boolean | Whether to hide the title |

$3

Container that manages which step is currently visible.

| Prop | Type | Description |
|------|------|-------------|
| children | ReactNode | Step components |
| className | string | CSS class for styling |

$3

Visualizes progress through the form steps.

| Prop | Type | Description |
|------|------|-------------|
| type | "dot" \| "bar" \| "dashed" | Type of progress indicator |
| className | string | CSS class for styling |
| fillColor | string | Color for completed sections (default: "bg-blue-500") |
| trackColor | string | Color for incomplete sections (default: "bg-gray-300") |
| height | string | Height of the bar (default: "h-2") |
| dotColor | string | Color for completed dots (default: "bg-blue-500 border-blue-500") |
| inactiveDotColor | string | Color for incomplete dots (default: "bg-white border-gray-300") |
| connectorColor | string | Color for dot connectors (default: "bg-gray-300") |
| dotSize | string | Size of dots (default: "w-3 h-3") |
| dashedGap | string | Gap between dashed segments (default: "gap-1") |
| dashedSegmentRadius | string | Border radius of dashed segments (default: "rounded") |

$3

Container for navigation buttons.

| Prop | Type | Description |
|------|------|-------------|
| children | ReactNode | Button components |
| className | string | CSS class for styling |

$3

Navigation buttons for the form.

| Prop | Type | Description |
|------|------|-------------|
| children | ReactNode | Button content |
| className | string | CSS class for styling |
| onClick | (event: React.MouseEvent) => void | Click handler |

$3

Hook to access the multi-step form context.

`jsx
const {
currentStepIndex,
currentStepKey,
stepFields,
setStepFields,
nextStep,
prevStep,
submit,
steps
} = useMultistepForm();
`

| Return Value | Type | Description |
|--------------|------|-------------|
| currentStepIndex | number | Index of the current step |
| currentStepKey | string | Key of the current step |
| stepFields | Record | Map of step keys to field names |
| setStepFields | React.Dispatch>> | Function to update step fields |
| nextStep | () => void | Function to navigate to the next step |
| prevStep | () => void | Function to navigate to the previous step |
| submit | () => void | Function to submit the form |
| steps | string[] | Array of step keys |

Progress Visualization

The ProgressBar component offers three different styles:

$3

`jsx

`

A continuous progress bar that fills based on the current step.

$3

`jsx

`

Dots connected by lines, with completed steps highlighted.

$3

`jsx

`

Segmented bar with each segment representing a step.

Customization

All components accept a className prop for styling. You can use this to apply your own styles or integrate with CSS frameworks like Tailwind CSS.

For buttons, you can either provide a string as children (which will use default styling) or pass a custom button component:

`jsx
// Using default styling
Next

// Using custom button


Next


`

Contributing

Contributions are welcome! Here's how you can contribute:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature`)
5. Open a Pull Request

Please make sure to update tests as appropriate and adhere to the existing coding style.

License

This project is licensed under the MIT License - see the LICENSE file for details.