Scoped

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

Basic Usage

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 } = useStepper();
  return (
    <>
      {when("first", step => <p>Starting with {step.title}</p>)}
      {when("second", step => <p>In the middle: {step.title}</p>)}
      {when("last", step => <p>Ending with {step.title}</p>)}
    </>
  );
};
 
const StepNavigation = () => {
  const { isLast, reset, next, when } = useStepper();
  return (
    <button onClick={isLast ? reset : next}>
      {when("last", () => "Reset", () => "Next")}
    </button>
  );
};

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
children	`React.ReactNode`	Content to render inside the stepper.	Yes

Nested Scopes

You can nest multiple scopes for more complex stepper hierarchies:

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