35 lines
891 B
TypeScript
35 lines
891 B
TypeScript
|
import { useState, useEffect, useCallback } from 'react';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Hook for saving and restoring scroll position in sessionStorage.
|
||
|
|
*/
|
||
|
|
export function useScrollPosition(key: string) {
|
||
|
|
const [scrollPosition, setScrollPosition] = useState(0);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const saved = sessionStorage.getItem(`scroll-${key}`);
|
||
|
|
if (saved) {
|
||
|
|
setScrollPosition(parseInt(saved, 10));
|
||
|
|
}
|
||
|
|
}, [key]);
|
||
|
|
|
||
|
|
const saveScrollPosition = useCallback(
|
||
|
|
(position: number) => {
|
||
|
|
setScrollPosition(position);
|
||
|
|
sessionStorage.setItem(`scroll-${key}`, position.toString());
|
||
|
|
},
|
||
|
|
[key],
|
||
|
|
);
|
||
|
|
|
||
|
|
const restoreScrollPosition = useCallback(
|
||
|
|
(element: HTMLElement | null) => {
|
||
|
|
if (element && scrollPosition > 0) {
|
||
|
|
element.scrollTop = scrollPosition;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
[scrollPosition],
|
||
|
|
);
|
||
|
|
|
||
|
|
return { scrollPosition, saveScrollPosition, restoreScrollPosition };
|
||
|
|
}
|