@tour-kit/coreHooks
useStep
useStep hook: access current step data, index, progress percentage, and isFirst/isLast flags in tour components
domidex01Published
Access the current step data and computed properties.
Usage
import { useStep } from '@tour-kit/core';
function StepContent() {
const {
step,
index,
isFirst,
isLast,
progress,
} = useStep();
return (
<div>
<h2>{step.title}</h2>
<p>{step.content}</p>
<span>Step {index + 1} of {progress.total}</span>
</div>
);
}Return Value
Prop
Type
Accessing Target Element
const { targetElement } = useStep();
useEffect(() => {
if (targetElement) {
// Scroll target into view
targetElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
}, [targetElement]);