1
0
mirror of https://github.com/Unleash/unleash.git synced 2024-10-18 20:09:08 +02:00
unleash.unleash/frontend/src/hooks/useOnVisible.ts
olav b3ac69a2c8 feat: add search to event log pages (#1205)
* feat: add search to event log pages

* refactor: redesign event log pages

* refactor: convert makeStyles to styled components
2022-08-09 16:00:51 +02:00

25 lines
757 B
TypeScript

import { useRef, useEffect } from 'react';
// Call `onVisible` when the `ref` element is fully visible in the viewport.
// Useful for detecting when the user has scrolled to the bottom of the page.
export const useOnVisible = <T extends HTMLElement>(onVisible: () => void) => {
const ref = useRef<T>(null);
useEffect(() => {
if (ref.current) {
const handler = (entries: IntersectionObserverEntry[]) => {
if (entries[0].isIntersecting) {
onVisible();
}
};
const observer = new IntersectionObserver(handler);
observer.observe(ref.current);
return () => observer.disconnect();
}
}, [onVisible]);
return ref;
};