What does the useTour hook return?

useTour returns isActive, currentStep, currentStepIndex, totalSteps, and actions: start(), next(), prev(), skip(), and complete() for controlling tour state.

How do I programmatically start a tour?

Call const { start } = useTour() and invoke start() from a button click handler or useEffect. You can optionally pass a step index to start at a specific step.

Can I have multiple tours on one page?

Yes, use TourKitProvider at the app level and give each Tour a unique id. Use useTour({ tourId }) to control a specific tour instance.

How do I listen for tour events?

Pass onStart, onComplete, onSkip, and onStepChange callback props to the Tour component. These fire at each lifecycle event with tour state.

useTour

useTour hook: control tour state with start, next, prev, skip, and complete actions plus step tracking in React

The primary hook for controlling tour state and actions.

Usage

import { useTour } from '@tour-kit/core';

function MyComponent() {
  const {
    isActive,
    currentStep,
    currentStepIndex,
    totalSteps,
    start,
    next,
    prev,
    skip,
    complete,
  } = useTour('my-tour');

  return (
    <button onClick={() => start()}>
      {isActive ? 'Tour Running' : 'Start Tour'}
    </button>
  );
}

Return Value

Prop

Type

Starting at a Specific Step

const { start } = useTour('my-tour');

// Start at step index 2
start(2);

const { next, currentStep } = useTour('my-tour');

function handleNext() {
  if (currentStep?.data?.requiresValidation) {
    // Perform validation first
    if (isValid) next();
  } else {
    next();
  }
}

useStep — single-step state and visibility, when useTour is broader than you need.
useTourContext — low-level context accessor useTour is built on.
<TourProvider> — must be an ancestor for this hook to work.
<Tour> component — declarative wrapper most React apps use instead of calling this hook directly.
Imperative control guide — patterns for driving the tour from outside React events.
@tour-kit/core API reference — full surface area of the core package.

useTour

Usage

Return Value

Starting at a Specific Step

Conditional Navigation

Ship onboarding, not config.

On this page

useTour

Usage

Return Value

Starting at a Specific Step

Conditional Navigation

Related

Ship onboarding, not config.

On this page