Events

<Guide> exposes the tour lifecycle through callback props. Use them to persist progress, fire analytics, or coordinate with the rest of your app.

Lifecycle callbacks

<Guide
  tour={tour}
  steps={steps}
  isActive={isActive}
  onNext={(stepId) => analytics.track("tour_step_advanced", { stepId })}
  onStop={(stepId) => {
    analytics.track("tour_completed", { lastStepId: stepId });
    setIsActive(false);
  }}
  onDismiss={(stepId) => {
    analytics.track("tour_dismissed", { stepId });
    setIsActive(false);
  }}
/>

Available callbacks

Prop	Signature	Fires when
onNext	(stepId?: string) => void	The user advances to the next step.
onStop	(stepId?: string) => void	The tour stops (either completed or explicitly stopped).
onDismiss	(stepId?: string) => void	The user closes the tour via the close button.

Per-step hooks

For fine-grained control, each step can carry its own onHighlightStarted, onHighlighted, and onDeselected hooks:

{
  id: "step-save",
  title: "Save your work",
  onHighlighted: (element) => {
    element?.classList.add("pulse");
  },
  onDeselected: (element) => {
    element?.classList.remove("pulse");
  },
  configuration: { /* ... */ },
}

Persisting progress

Guide.js is stateless by design. You control what gets persisted.

const [startIndex, setStartIndex] = useState(() => {
  return Number(localStorage.getItem("tour.lastSeenStep") ?? 0);
});

<Guide
  tour={tour}
  steps={steps}
  isActive
  startIndex={startIndex}
  onNext={(stepId) => {
    const index = steps.findIndex((s) => s.id === stepId);
    if (index >= 0) {
      setStartIndex(index);
      localStorage.setItem("tour.lastSeenStep", String(index));
    }
  }}
/>;