Next Form Wizard

Next Form Wizard is a customizable wizard component for multi-step forms in Next.js and React applications. It provides a flexible interface to manage form navigation, validation, and step controls with ease.

Features

• Multi-step Form Navigation: Easily navigate between steps in a wizard-like interface.
• Customizable Buttons: Define custom navigation buttons for each step.
• Form Validation: Implement step-wise validation to control navigation.
• Flexible Configuration: Customize step labels, icons, colors, and content.
• Lightweight and Responsive: Designed to be lightweight and responsive out-of-the-box.

Installation

Install the package using npm:

npm install next-form-wizard

Or using yarn:

yarn add next-form-wizard

Usage

Importing Components and Hooks

Import the FormWizard component and useFormWizard hook into your Next.js Or React js application:

import { FormWizard, useFormWizard } from "next-form-wizard";

Example Usage

Create a list of steps and define validation logic for each step. Use the FormWizard component to render the wizard:

import React from "react";
import { FormWizard } from "next-form-wizard";
import { faUser, faCog, faCheck } from "@fortawesome/free-solid-svg-icons";

const steps = [
  {
    label: "Personal details",
    icon: faUser,
    content: (
      <div>
        <h2>First Tab</h2>
        <p>Some content for the first tab</p>
      </div>
    ),
  },
  {
    label: "Additional Info",
    icon: faCog,
    content: (
      <div>
        <h2>Second Tab</h2>
        <p>Some content for the second tab</p>
      </div>
    ),
  },
  {
    label: "Last step",
    icon: faCheck,
    content: (
      <div>
        <h2>Third Tab</h2>
        <p>Some content for the third tab</p>
      </div>
    ),
  },
];

const validateStep = (step: number) => {
  // Add validation logic for each step here
  return true; // Replace with actual validation logic
};

const customButtons = (
  currentStep: number,
  nextStep: () => void,
  prevStep: () => void
) => (
  <div>
    {currentStep > 0 && <button onClick={prevStep}>Back</button>}
    <button onClick={nextStep}>
      {currentStep < steps.length - 1 ? "Next" : "Finish"}
    </button>
  </div>
);

const MyForm = () => (
  <div>
    <h1>Next.js Form Wizard Example</h1>
    <FormWizard
      steps={steps}
      validateStep={validateStep}
      customButtons={customButtons}
    />
  </div>
);

export default MyForm;

Props

FormWizardProps

Prop	Type	Description
steps	{ label: string; icon: IconDefinition; content: ReactNode }[]	Array of objects defining each step in the form wizard.
validateStep	(step: number) => boolean	Function to validate each step before allowing navigation to the next step.
customButtons	(currentStep: number, nextStep: () => void, prevStep: () => void) => ReactNode	Custom navigation buttons component.
initialStep	number	Initial step index to start the wizard (default: 0).

License

MIT License. See LICENSE for more information.

Contributing

Contributions are welcome! Fork the repository, make your changes, and submit a pull request.

Issues

If you encounter any issues or have suggestions for improvements, please open an issue on GitHub.

---