@tour-kit/coreHooks
usePersistence
usePersistence hook: save and restore tour completion state across browser sessions with localStorage or custom adapters
domidex01Published
Persists tour completion state across sessions.
Usage
import { usePersistence } from '@tour-kit/core';
function App() {
const {
isCompleted,
isSkipped,
markCompleted,
markSkipped,
reset,
} = usePersistence('onboarding-tour');
if (isCompleted) {
return <div>Tour already completed!</div>;
}
return <Tour />;
}Return Value
Prop
Type
Configuration
usePersistence('tour-id', {
strategy: 'localStorage', // 'localStorage' | 'sessionStorage' | 'custom'
key: 'my-app-tours',
version: 1,
});Custom Storage
usePersistence('tour-id', {
strategy: 'custom',
storage: {
get: async (key) => {
const response = await fetch(`/api/tours/${key}`);
return response.json();
},
set: async (key, value) => {
await fetch(`/api/tours/${key}`, {
method: 'POST',
body: JSON.stringify(value),
});
},
remove: async (key) => {
await fetch(`/api/tours/${key}`, { method: 'DELETE' });
},
},
});Resume Tour
const { currentStep } = usePersistence('tour-id');
const { start } = useTour('tour-id');
// Resume from last position
useEffect(() => {
if (currentStep !== null && currentStep > 0) {
start(currentStep);
}
}, []);Related
useRoutePersistence— multi-page extension that resumes across navigations.- Persistence guide — strategy comparison and migration patterns.
- Multi-tab guide — synchronize completion state across browser tabs.
- Storage utilities — adapters (
localStorage,sessionStorage, cookies, custom) that back this hook.
Ship onboarding, not config.
npm i @tour-kit/core is MIT and free. The Pro packages work unlicensed too — a one-time $99 license removes the production watermark when you ship.
MIT-licensed — no signup, no credit card. Pay once, only when you ship.