Multi-Step Form Component

A flexible and customizable multi-step form component for React applications. This package provides an easy way to create multi-step forms with a sleek UI, including a progress stepper and animated transitions between steps.

Features

• Easy-to-use API
• Customizable styling
• Built-in form context for managing form state
• Animated transitions between steps
• Progress stepper with completed step indicators

Installation

Install the package using npm:

npm install @your-username/multi-step-form

Or using yarn:

yarn add @your-username/multi-step-form

Usage

Here's a basic example of how to use the Multi-Step Form component:

import React from 'react';
import { MultiStepForm, Step } from '@your-username/multi-step-form';

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

  return (
    <MultiStepForm onSubmit={handleSubmit}>
      <Step title="Personal Info">
        <h2>Personal Information</h2>
        {/* Add your form fields here */}
      </Step>
      <Step title="Contact">
        <h2>Contact Information</h2>
        {/* Add your form fields here */}
      </Step>
      <Step title="Review">
        <h2>Review Your Information</h2>
        {/* Add a summary of the form data here */}
      </Step>
    </MultiStepForm>
  );
};

export default MyForm;

API

MultiStepForm

The main component that wraps all the steps.

Props:

• children: React nodes (should be Step components)
• onSubmit: Function to handle form submission
• className: Optional CSS class name
• style: Optional inline styles
• stepperProps: Optional props for the stepper component
• navigationProps: Optional props for the navigation component

Step

Represents a single step in the form.

Props:

• children: React nodes (your form fields)
• title: String title for the step (displayed in the stepper)
• className: Optional CSS class name
• style: Optional inline styles

Styling

The components come with basic styling, but you can easily customize the appearance by passing className or style props to the MultiStepForm and Step components.

Form State Management

This package uses React Context to manage the form state. You can access and update the form data using the useFormContext hook:

import { useFormContext } from '@your-username/multi-step-form';

const MyCustomInput = () => {
  const { formData, setFormData } = useFormContext();

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  return <input name="myField" value={formData.myField || ''} onChange={handleChange} />;
};

Example

Here's a more complete example showing how to create a multi-step registration form:

import React from 'react';
import { MultiStepForm, Step, useFormContext } from '@your-username/multi-step-form';

const RegistrationForm = () => {
  const handleSubmit = (data) => {
    console.log('Registration complete:', data);
    // Submit data to your API here
  };

  return (
    <MultiStepForm onSubmit={handleSubmit}>
      <Step title="Personal Info">
        <PersonalInfoStep />
      </Step>
      <Step title="Account">
        <AccountStep />
      </Step>
      <Step title="Confirm">
        <ConfirmStep />
      </Step>
    </MultiStepForm>
  );
};

const PersonalInfoStep = () => {
  const { formData, setFormData } = useFormContext();

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  return (
    <div>
      <h2>Personal Information</h2>
      <input
        name="firstName"
        value={formData.firstName || ''}
        onChange={handleChange}
        placeholder="First Name"
      />
      <input
        name="lastName"
        value={formData.lastName || ''}
        onChange={handleChange}
        placeholder="Last Name"
      />
    </div>
  );
};

const AccountStep = () => {
  const { formData, setFormData } = useFormContext();

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  return (
    <div>
      <h2>Account Information</h2>
      <input
        name="email"
        type="email"
        value={formData.email || ''}
        onChange={handleChange}
        placeholder="Email"
      />
      <input
        name="password"
        type="password"
        value={formData.password || ''}
        onChange={handleChange}
        placeholder="Password"
      />
    </div>
  );
};

const ConfirmStep = () => {
  const { formData } = useFormContext();

  return (
    <div>
      <h2>Confirm Your Information</h2>
      <p>First Name: {formData.firstName}</p>
      <p>Last Name: {formData.lastName}</p>
      <p>Email: {formData.email}</p>
    </div>
  );
};

export default RegistrationForm;

This example demonstrates how to create a three-step registration form using the Multi-Step Form component.

License

MIT