@tour-kit/coreHooks
usePersistence
usePersistence hook: save and restore tour completion state across browser sessions with localStorage or custom adapters
usePersistence
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);
}
}, []);