Scoped

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

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

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

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

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

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

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

export const MyScopedStepper = () => (
  <Scoped
    initialStep="second"
    initialMetadata={{ first: { completed: true }, second: null, last: null }}
  >
    <StepContent />
  </Scoped>
);

const StepContent = () => {
  const stepper = useStepper();
  return <div>Current: {stepper.state.current.data.title}</div>;
};

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

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 />
    <LocalStepper.Scoped>
      <LocalStepContent />
    </LocalStepper.Scoped>
  </GlobalStepper.Scoped>
);

const GlobalStepContent = () => {
  const stepper = GlobalStepper.useStepper();
  return <div>Global: {stepper.state.current.data.title}</div>;
};

const LocalStepContent = () => {
  const stepper = LocalStepper.useStepper();
  return <div>Local: {stepper.state.current.data.title}</div>;
};

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

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

export const MyStepper = () => (
  <Stepper.Root>
    {({ stepper }) => (
      <div>
        <p>Current: {stepper.state.current.data.title}</p>
        <button onClick={() => stepper.navigation.next()}>Next</button>
      </div>
    )}
  </Stepper.Root>
);