@precooked/react-stepper

The @precooked/react-stepper package provides a customizable and reusable step indicator component for guiding users through a series of steps in a process.

Features

• Displays steps with customizable status, display name, and description.
• Supports clickable steps for navigation.
• Renders navigation lines between steps.
• Integrates with @precooked/react-icon for status icons.
• Fully styled with support for shadow effects on step circles.

Installation

Install the package and its dependencies:

npm install @precooked/react-stepper @precooked/react-icon @precooked/utils @precooked/react-touchable

Props

| Name | Type | Description | |------------------------|------------------------------------------------|-----------------------------------------------------------------------------| | steps | Step[] | Array of steps, each with a status, name, displayName, and optionally description. | | activeStepIndex | number | The index of the currently active step. | | onStepSelect | (step: Step, index: number) => void | Callback triggered when a step is selected. Returns the step object and its index. | | containerStyle | React.CSSProperties | Optional custom styles for the stepper container. | | showNavigationButtons| boolean | Whether to show navigation buttons (true by default). |

Step Object

Each step in the steps array should follow the structure:

interface Step {
  name: string;
  displayName: string;
  description?: string;
  status: "incomplete" | "completed" | "pendingApproval" | "approved" | "draft" | "withObservations";
}

Usage

Here’s an example implementation of the Stepper component:

import React, { useState } from "react";
import { Stepper, Step } from "@precooked/react-stepper";

const App = () => {
  const [activeStep, setActiveStep] = useState(0);

  const steps: Step[] = [
    { name: "step1", displayName: "Step 1", status: "incomplete", description: "This is the first step." },
    { name: "step2", displayName: "Step 2", status: "completed", description: "This step is completed." },
    { name: "step3", displayName: "Step 3", status: "pendingApproval" },
  ];

  const handleStepSelect = (step: Step, index: number) => {
    setActiveStep(index);
    console.log("Selected step:", step);
  };

  return (
    <Stepper
      steps={steps}
      activeStepIndex={activeStep}
      onStepSelect={handleStepSelect}
      containerStyle={{ margin: "20px" }}
      showNavigationButtons
    />
  );
};

export default App;

Styling

The Stepper component includes pre-defined styles for its elements. You can override or customize these styles using the containerStyle prop.

License

This component is part of the Precooked project and is licensed under the MIT License.

Links

• Precooked Project
• NPM Package