Scoped Stepper Component

The Scoped component works as a provider and allows us to synchronise the state of steps via useStepper between child components.

Usage

const Stepper = defineStepper(
  { id: "first", title: "First" },
  { id: "second", title: "Second" },
  { id: "last", title: "Last" }
);
 
export const MyScopedStepper = () => {
  return (
    <Stepper.Scoped>
      <MySteps />
      <MyActions />
    </Stepper.Scoped>
  );
};

Then, in the child component, we can use the useStepper hook to get the steps and use them.

const MySteps = () => {
  const stepper = useStepper();
 
  return (
    <>
      {stepper.when("first", (step) => (
        <p>This is the {step.id} step. So it begins.</p>
      ))}
 
      {stepper.when("second", (step) => (
        <p>This is the {step.id} step.</p>
      ))}
 
      {stepper.when("last", (step) => (
        <p>This is the {step.id} step. So it ends.</p>
      ))}
    </>
  );
};
 
const MyActions = () => {
  const stepper = useStepper();
 
  return (
    <button
      type="button"
      onClick={stepper.isLast ? stepper.reset : stepper.next}
    >
      {stepper.when(
        "last",
        () => "Reset",
        () => "Next"
      )}
    </button>
  );
};

The Scoped component is only necessary if we want a child component to have access to the steps. Otherwise, we can use the hook directly at the same level where we render our code.

API Reference

Prop	Type	Default
`initialStep`	`string`
`children*`	`React.ReactNode`

Multiple Scopes

We can have multiple scopes in our application. For example, we can have a global scope and a local scope.

const GlobalStepper = defineStepper(
  { id: "first", title: "First" },
  { id: "second", title: "Second" },
  { id: "last", title: "Last" }
);
 
const LocalStepper = defineStepper(
  { id: "first", title: "First" },
  { id: "second", title: "Second" },
  { id: "last", title: "Last" }
);
 
export const MyGlobalStepper = () => {
  return (
    <GlobalStepper.Scoped>
      <MySteps />
      <MyActions />
      <LocalStepper.Scoped>
        <MyLocalSteps />
        <MyLocalActions />
      </LocalStepper.Scoped>
    </GlobalStepper.Scoped>
  );
};

Finally, we can use the Global.useStepper on all children of GlobalStepper.Scoped and Local.useStepper on all children of LocalStepper.Scoped.

useStepper()Our first stepper