18 lines
625 B
TypeScript
18 lines
625 B
TypeScript
import { useCallback, useEffect } from "react";
|
|
import { useIsClient } from "usehooks-ts";
|
|
import { Ids } from "types/ids";
|
|
|
|
export const useOnScroll = (id: Ids, onScroll: (scroll: number) => void): void => {
|
|
const isClient = useIsClient();
|
|
const elem = isClient ? document.querySelector(`#${id}`) : null;
|
|
const listener = useCallback(() => {
|
|
if (elem?.scrollTop) {
|
|
onScroll(elem.scrollTop);
|
|
}
|
|
}, [elem?.scrollTop, onScroll]);
|
|
useEffect(() => {
|
|
elem?.addEventListener("scroll", listener);
|
|
return () => elem?.removeEventListener("scroll", listener);
|
|
}, [elem, listener]);
|
|
};
|