How to used the useStepper hooks across different components?

[caturbgs]

Hi, I just want to know how to use the useStepper hook when using multiple files. In my case, I'm using next.js layout, so the stepper steps is on the header, and then the content and action button for the stepper is on each page.
I'm already try using Scopped Stepper here. But, when I try to move to the next step, the stepper on header is not updated.

Thank you!

[damianricobelli]

Hey, thanks for opening this discussion. I'm glad you are using this library. Could you show me an example of what you are doing ?

[damianricobelli]

Note: You do not need to define the Stepper in a layout or page. You can use any pattern you want, as you might feel a bit strange about the pattern of exporting a layout component 🤝

[caturbgs]

Gotcha! But, trying to reproduce this on the sandbox, the current value still not moved.
Can you look at the sandbox? I already refactor it using your answer above.

layout.tsx

"use client";

import { defineStepper } from "@stepperize/react";

export const Stepper = defineStepper(
  {
    id: "step-1",
    title: "Step 1",
    description: "Description step 1",
  },
  {
    id: "step-2",
    title: "Step 2",
    description: "Description step 2",
  }
);

export default function TestLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const stepper = Stepper.useStepper();

  return (
    <div className="flex flex-col items-center justify-center gap-10 p-10">
      <Stepper.Scoped>
        <nav
          id="header"
          className="flex items-center justify-center gap-4 text-center"
        >
          {stepper.all.map((step) => (
            <div
              key={step.id}
              className={stepper.current.id === step.id ? "bg-slate-200" : ""}
            >
              <h1>{step.title}</h1>
              <p>{step.description}</p>
            </div>
          ))}
        </nav>
        <div id="content">{children}</div>
      </Stepper.Scoped>
    </div>
  );
}

page.tsx

"use client";

import { Stepper } from "./layout";

export default function StepperizePage() {
  const stepper = Stepper.useStepper();

  function handleNext() {
    stepper.next();
  }

  return (
    <div className="flex items-center justify-center gap-8">
      <p>Page</p>
      <button className="bg-slate" onClick={handleNext}>
        Next Step
      </button>
    </div>
  );
}

[caturbgs]

Screen.Recording.2024-09-11.at.15.11.09.mov

Here's the reproduce I've been doing on codesandbox, as you can see the stepper current value is not moved, although I'm called the stepper.next() function. cc @damianricobelli

[caturbgs]

Fix this with avoid define/called a hooks useStepper() on the layout.tsx file, so I'm refactored the stepper component inside the layout into the independent component.

layout.tsx

"use client";

import { defineStepper } from "@stepperize/react";
import { useEffect } from "react";
import StepperLayout from "./stepper";

export const Stepper = defineStepper(
  {
    id: "step-1",
    title: "Step 1",
    description: "Description step 1",
  },
  {
    id: "step-2",
    title: "Step 2",
    description: "Description step 2",
  }
);

export default function StepperizeLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <div className="flex flex-col items-center justify-center gap-10 p-10">
      <Stepper.Scoped>
        <StepperLayout />
        <div id="content">{children}</div>
      </Stepper.Scoped>
    </div>
  );
}

stepper.tsx

import { useEffect } from "react";
import { Stepper } from "./layout";

export default function StepperLayout() {
  const stepper = Stepper.useStepper();
  console.debug("stepper layout", stepper);

  return (
    <nav
      id="header"
      className="flex items-center justify-center gap-4 text-center"
    >
      {stepper.all.map((step) => (
        <div
          key={step.id}
          className={
            stepper.current.id === step.id
              ? "bg-slate-200 p-4 rounded border border-slate-600"
              : "p-4 rounded border border-slate-600"
          }
        >
          <h1>{step.title}</h1>
          <p>{step.description}</p>
        </div>
      ))}
    </nav>
  );
}

page.tsx

"use client";

import { Stepper } from "./layout";

export default function StepperizePage() {
  const stepper = Stepper.useStepper();
  console.debug("stepper page", stepper);

  function handleNext() {
    console.debug("called next");
    stepper.next();
    console.debug("stepper page after next()", stepper);
  }

  function handlePrevious() {
    console.debug("called prev");
    stepper.prev();
    console.debug("stepper page after prev()", stepper);
  }

  return (
    <div className="flex items-center justify-center gap-8">
      {stepper.isFirst && (
        <button
          className="bg-slate-100 border-2 px-2 border-slate-400 rounded-xl"
          onClick={handleNext}
        >
          Next Step
        </button>
      )}

      <p>Page</p>

      {stepper.isLast && (
        <button
          className="bg-slate-100 border-2 px-2 border-slate-400 rounded-xl"
          onClick={handlePrevious}
        >
          Previous Step
        </button>
      )}
    </div>
  );
}