Scoped

The Scoped component acts as a provider, allowing you to synchronize stepper state via useStepper across child components.

Basic Usage

import * as React from "react";
import { defineStepper } from "@stepperize/react";

const Stepper = defineStepper(
  { id: "first", title: "First" },
  { id: "second", title: "Second" },
  { id: "last", title: "Last" }
);

export const MyScopedStepper = () => (
  <Stepper.Scoped>
    <StepContent />
    <StepNavigation />
  </Stepper.Scoped>
);

const StepContent = () => {
  const { when } = Stepper.useStepper();
  return (
    <React.Fragment>
      {when("first", (step) => (
        <p>Starting with {step.title}</p>
      ))}
      {when("second", (step) => (
        <p>In the middle: {step.title}</p>
      ))}
    </React.Fragment>
  );
};

const StepNavigation = () => {
  const { isLast, reset, next, when } = Stepper.useStepper();
  return (
    <button onClick={isLast ? reset : next}>
      {when(
        "last",
        () => "Reset",
        () => "Next"
      )}
    </button>
  );
};

When to use Scoped

Use Scoped only when child components need access to stepper state. Otherwise, use the hook directly in your component.

API Reference

Name	Type	Description	Required
initialStep	`string`	ID of the initial step to display.	No
initialMetadata	`Record<string, Metadata>`	Initial metadata for the stepper.	No
children	`React.ReactNode`	Content to render inside the stepper.	Yes

Nested Scopes

You can nest multiple scopes for more complex stepper hierarchies:

import * as React from "react";
import { defineStepper } from "@stepperize/react";
// ---cut-before---
const GlobalStepper = defineStepper(
  { id: "start", title: "Start" },
  { id: "middle", title: "Middle" },
  { id: "end", title: "End" }
);

const LocalStepper = defineStepper(
  { id: "sub1", title: "Sub-step 1" },
  { id: "sub2", title: "Sub-step 2" }
);

export const NestedSteppers = () => (
  <GlobalStepper.Scoped>
    <GlobalStepContent />
    <GlobalNavigation />
    <LocalStepper.Scoped>
      <LocalStepContent />
      <LocalNavigation />
    </LocalStepper.Scoped>
  </GlobalStepper.Scoped>
);

// Use GlobalStepper.useStepper() for global scope
// Use LocalStepper.useStepper() for local scope

This structure allows for independent control of global and local stepper states.

Basic Usage

API Reference

Nested Scopes

On this page