Getting Started
TypeScript
Configure TypeScript strict mode, use inferred step types, and leverage generic tour configurations in User Tour Kit
TypeScript
TourKit is written in TypeScript and provides full type definitions.
Type Imports
import type {
TourConfig,
TourStepConfig,
TourState,
Placement,
SpotlightConfig,
} from '@tour-kit/react';Typed Tour Configuration
import { createTour, createStep } from '@tour-kit/react';
const tour = createTour({
id: 'onboarding',
steps: [
createStep({
id: 'welcome',
target: '#hero',
title: 'Welcome',
content: 'Hello!',
placement: 'bottom',
}),
],
});Hook Return Types
import { useTour, type UseTourReturn } from '@tour-kit/react';
function MyComponent() {
const tour: UseTourReturn = useTour('my-tour');
// tour.start, tour.next, tour.prev, etc.
}Generic Step Data
You can type custom data attached to steps:
interface MyStepData {
videoUrl?: string;
requiredRole?: 'admin' | 'user';
}
const { currentStep } = useTour<MyStepData>('my-tour');
if (currentStep?.data?.videoUrl) {
// TypeScript knows videoUrl is a string
}Strict Mode Compatibility
TourKit is fully compatible with React Strict Mode and follows all TypeScript strict mode guidelines:
{
"compilerOptions": {
"strict": true,
"noUncheckedIndexedAccess": true
}
}