react-stepper-context v1.0.1

React Stepper Context

A lightweight and flexible React Context for managing multi-step flows in React and React Native.
Whether you're building multi-step wizards, onboarding flows, or checkout processes, React Stepper Context provides a customizable and easy-to-use framework.

🚀 Features

• Customizable Layouts: Fully control the design of your stepper and navigation components.
• Built for React & React Native: Works seamlessly across platforms.
• Flexible Step Management: Control locking, navigation, and form state at each step.
• Lightweight API: Leverages React Context and hooks for clean and reusable logic.

Common Use Cases:

• Onboarding flows
• Multi-step forms
• Checkout processes

📦 Installation

Install the package via npm or yarn:

npm install react-stepper-context

or

yarn add react-stepper-context

🛠 Usage

React Stepper Context allows you to define steps, manage navigation, and handle state within a multi-step flow. Here’s a simple example:

Example Setup

import { ReactStepperContext } from 'react-stepper-context';

const steps = [
  {
    key: 'step1',
    component: <Step1 />,
    title: 'Step 1',
  },
  {
    key: 'step2',
    component: <Step2 />,
    title: 'Step 2',
    locked: true,
  },
];

function App() {
  return (
    <ReactStepperContext steps={steps}>
      {(currentStepComponent) => (
        <div className="wrapper">
          <Sidebar />
          {currentStepComponent}
        </div>
      )}
    </ReactStepperContext>
  );
}

Step Component Example

Each step manages its own form values and navigation logic using the useReactStepperContext hook.

Just import and use the useReactStepperContext hook, it will provide you with all the necessary functions and values.

import React from 'react';
import { useReactStepperContext } from 'react-stepper-context';

export const Step1: React.FC = () => {
  const { setCurrentStepValues, goToNextStep, goToPreviousStep } = useReactStepperContext(); 

  const handleSubmit = () => {
    setCurrentStepValues({ key: 'value' });
    goToNextStep();
  };

  return (
    <div>
      <h2>Step 1</h2>
      <button onClick={goToPreviousStep}>Previous</button>
      <button onClick={handleSubmit}>Next</button>
    </div>
  );
};

Sidebar Example

The sidebar dynamically displays the steps and their statuses, enabling navigation between steps.

import { useReactStepperContext } from 'react-stepper-context';

export const Sidebar = () => {
  const { steps, currentStepKey, goToStep } = useReactStepperContext(); 

  return (
    <div>
      {steps.map((step, index) => (
        <button key={step.key} onClick={() => goToStep(index)} disabled={step.locked}>
          {step.title} - {step.status}
        </button>
      ))}
    </div>
  );
};

📖 API Reference

Enums

StepStatus

Represents the status of a step in the stepper.

Types

Step

Defines a single step in the stepper.

ReactStepperContextProps

Props required to initialize the ReactStepperContext.

ReactStepperContextValueType

Values and methods available via the useReactStepperContext hook.

Usage Hooks

useReactStepperContext

Provides access to the context values and methods listed above, allowing full control over the stepper flow.

import { useReactStepperContext } from 'react-stepper-context';

const { steps, currentStepIndex, goToNextStep, lockStep } = useReactStepperContext();

📄 License

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

📝 Contribution

Contributions are welcome! If you find bugs or have ideas for improvements, feel free to open an issue or a pull request.