@tour-kit/coreHooks
useTour
useTour hook: control tour state with start, next, prev, skip, and complete actions plus step tracking in React
useTour
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);Conditional Navigation
const { next, currentStep } = useTour('my-tour');
function handleNext() {
if (currentStep?.data?.requiresValidation) {
// Perform validation first
if (isValid) next();
} else {
next();
}
}