TourKit
@tour-kit/coreTypes

Tour Types

TypeScript interfaces for TourState, TourActions, TourCallbacks, and the complete tour lifecycle type system

Tour Types

TourConfig

interface TourConfig {
  id: string;
  steps: TourStep[];
  autoStart?: boolean;
  startAt?: number;
  keyboard?: KeyboardConfig | boolean;
  spotlight?: SpotlightConfig | boolean;
  persistence?: PersistenceConfig | boolean;
  a11y?: A11yConfig;
  scroll?: ScrollConfig;
  onStart?: (context: TourContext) => void;
  onComplete?: (context: TourContext) => void;
  onSkip?: (context: TourContext) => void;
  onStepChange?: (step: TourStep, index: number) => void;
}

TourState

interface TourState {
  tourId: string | null;
  isActive: boolean;
  currentStepIndex: number;
  currentStep: TourStep | null;
  totalSteps: number;
  isLoading: boolean;
  isTransitioning: boolean;
  completedTours: string[];
  skippedTours: string[];
}

TourContext

interface TourContext {
  tourId: string;
  currentStep: TourStep | null;
  currentStepIndex: number;
  totalSteps: number;
  isFirstStep: boolean;
  isLastStep: boolean;
}

Placement

type Side = 'top' | 'bottom' | 'left' | 'right';
type Alignment = 'start' | 'center' | 'end';
type Placement = Side | `${Side}-${Alignment}`;

// All valid placements:
// 'top' | 'top-start' | 'top-end'
// 'bottom' | 'bottom-start' | 'bottom-end'
// 'left' | 'left-start' | 'left-end'
// 'right' | 'right-start' | 'right-end'

On this page