File size: 1,084 Bytes
9705b6c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
import { RefObject, useCallback } from 'react';
import throttle from 'lodash/throttle';
type TUseScrollToRef = {
targetRef: RefObject<HTMLDivElement>;
callback: () => void;
smoothCallback: () => void;
};
export default function useScrollToRef({ targetRef, callback, smoothCallback }: TUseScrollToRef) {
// eslint-disable-next-line react-hooks/exhaustive-deps
const scrollToRef = useCallback(
throttle(
() => {
targetRef.current?.scrollIntoView({ behavior: 'instant' });
callback();
},
450,
{ leading: true },
),
[targetRef],
);
// eslint-disable-next-line react-hooks/exhaustive-deps
const scrollToRefSmooth = useCallback(
throttle(
() => {
targetRef.current?.scrollIntoView({ behavior: 'smooth' });
smoothCallback();
},
750,
{ leading: true },
),
[targetRef],
);
const handleSmoothToRef: React.MouseEventHandler<HTMLButtonElement> = (e) => {
e.preventDefault();
scrollToRefSmooth();
};
return {
scrollToRef,
handleSmoothToRef,
};
}
|