TourKit
@tour-kit/coreProviders

TourProvider

TourProvider: context provider that manages state, steps, and lifecycle for an individual product tour instance

TourProvider

Provides context for a single tour.

Usage

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

function App() {
  return (
    <TourProvider
      tour={{
        id: 'onboarding',
        steps: [{ id: 'step-1', target: '#btn', content: 'Click here' }],
      }}
    >
      <MyApp />
    </TourProvider>
  );
}

Props

Prop

Type

With Options

<TourProvider
  tour={{
    id: 'onboarding',
    steps: steps,
    autoStart: false,
    startAt: 0,
    keyboard: true,
    spotlight: {
      padding: 8,
      borderRadius: 4,
    },
    onComplete: () => console.log('Tour completed!'),
  }}
>
  <App />
</TourProvider>

On this page