Skip to main content
userTourKit
@tour-kit/coreTypes

Config Types

TypeScript interfaces for TourConfig, SpotlightConfig, KeyboardConfig, and other userTourKit configuration options

domidex01Published

SpotlightConfig

interface SpotlightConfig {
  enabled?: boolean;
  padding?: number;
  borderRadius?: number;
  animate?: boolean;
  duration?: number;
  overlayColor?: string;
  overlayOpacity?: number;
  clickThrough?: boolean;
}

KeyboardConfig

interface KeyboardConfig {
  enabled?: boolean;
  bindings?: {
    next?: string[];
    prev?: string[];
    skip?: string[];
    complete?: string[];
  };
  trapFocus?: boolean;
}

ScrollConfig

interface ScrollConfig {
  enabled?: boolean;
  behavior?: 'smooth' | 'instant' | 'auto';
  block?: 'start' | 'center' | 'end' | 'nearest';
  inline?: 'start' | 'center' | 'end' | 'nearest';
  offset?: number | { top: number; left: number };
}

PersistenceConfig

interface PersistenceConfig {
  enabled?: boolean;
  strategy?: 'localStorage' | 'sessionStorage' | 'custom';
  key?: string;
  version?: number;
  storage?: {
    get: (key: string) => Promise<unknown> | unknown;
    set: (key: string, value: unknown) => Promise<void> | void;
    remove: (key: string) => Promise<void> | void;
  };
}

A11yConfig

interface A11yConfig {
  announcements?: boolean;
  liveRegion?: 'polite' | 'assertive';
  ariaLabel?: string;
  closeLabel?: string;
  nextLabel?: string;
  prevLabel?: string;
  skipLabel?: string;
}

Default Values

const defaultSpotlight: SpotlightConfig = {
  enabled: true,
  padding: 8,
  borderRadius: 4,
  animate: true,
  duration: 200,
  overlayColor: '#000',
  overlayOpacity: 0.5,
  clickThrough: false,
};

const defaultKeyboard: KeyboardConfig = {
  enabled: true,
  bindings: {
    next: ['ArrowRight', 'Enter'],
    prev: ['ArrowLeft'],
    skip: ['Escape'],
  },
  trapFocus: true,
};

const defaultScroll: ScrollConfig = {
  enabled: true,
  behavior: 'smooth',
  block: 'center',
  inline: 'nearest',
};

TourKitProviderProps

Props for the global <TourKitProvider> (re-exported from @tour-kit/core and @tour-kit/react).

interface TourKitProviderProps {
  children: React.ReactNode
  config?: TourKitConfig
  /** Text direction; 'auto' resolves from document.dir on mount. */
  dir?: 'ltr' | 'rtl' | 'auto'
  onTourStart?: (tourId: string) => void
  onTourComplete?: (tourId: string) => void
  onTourSkip?: (tourId: string, stepIndex: number) => void
  onStepView?: (tourId: string, stepId: string, stepIndex: number) => void
  onBranchAction?: (tourId, stepId, actionId, target) => void
  onTourBranch?: (fromTourId, toTourId, fromStepId) => void
}

TourKitContextValue

Returned by useTourKitContext.

interface TourKitContextValue {
  config: TourKitConfig
  direction: 'ltr' | 'rtl'
  isRTL: boolean
  onTourStart?: (tourId: string) => void
  onTourComplete?: (tourId: string) => void
  onTourSkip?: (tourId: string, stepIndex: number) => void
  onStepView?: (tourId: string, stepId: string, stepIndex: number) => void
  onBranchAction?: (tourId, stepId, actionId, target) => void
  onTourBranch?: (fromTourId, toTourId, fromStepId) => void
}

Direction

type Direction = 'ltr' | 'rtl' | 'auto'

ElementPositionResult

Returned by useElementPosition.

interface ElementPositionResult {
  element: HTMLElement | null
  rect: DOMRect | null
  scrollParent: HTMLElement | null
  update: () => void
}