TourStep

TourStep component: define individual steps with target selectors, placement, content, and advance-on triggers

Defines a single step in the tour.

Usage

<TourStep
  id="welcome"
  target="#hero"
  title="Welcome!"
  content="This is step one."
  placement="bottom"
  spotlightPadding={8}
/>

Props

Prop

Type

Placement Options

// Side placements
placement="top"
placement="bottom"
placement="left"
placement="right"

// With alignment
placement="top-start"
placement="top-end"
placement="bottom-start"
placement="bottom-end"
placement="left-start"
placement="left-end"
placement="right-start"
placement="right-end"

Using Refs

import { useRef } from 'react';

function MyComponent() {
  const buttonRef = useRef<HTMLButtonElement>(null);

  return (
    <Tour id="my-tour">
      <TourStep
        target={buttonRef}
        title="Click me"
        content="This button does something cool."
      />
      <button ref={buttonRef}>My Button</button>
    </Tour>
  );
}

Async Step Transitions

<TourStep
  target="#form"
  title="Fill the form"
  content="Complete this form to continue."
  beforeLeave={async (context) => {
    // Validate form before moving to next step
    const isValid = await validateForm();
    if (!isValid) {
      throw new Error('Please complete the form');
    }
  }}
/>

Interactive Steps

<TourStep
  target="#input"
  title="Enter your name"
  content="Type your name in this field."
  interactive={true}
/>

When interactive is true, users can click and interact with the target element while the tour step is active.

Custom Step Data

<TourStep
  target="#video"
  title="Watch the video"
  content="Learn more by watching this tutorial."
  data={{
    videoUrl: 'https://example.com/tutorial.mp4',
    duration: 120,
  }}
/>

Access custom data in your components:

const { currentStep } = useTour('my-tour');
const videoUrl = currentStep?.data?.videoUrl;

<Tour> — the wrapper <TourStep> must live inside.
<TourCard> — the tooltip that renders each step's title + content.
target prop deep-dive — selector string vs. RefObject vs. getter function, with the resolution order.
useStep — read step state from inside content ReactNodes.
Hidden steps guide — use when and waitForTarget to skip steps conditionally.
Branching guide — author tours that diverge based on user choice.
Step types reference — every field on TourStep.