web(test): routes/Events

web/src/hooks/index.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'preact/hooks';
+import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
 
 export function useResizeObserver(...refs) {
   const [dimensions, setDimensions] = useState(
@@ -28,3 +28,32 @@ export function useResizeObserver(...refs) {
 
   return dimensions;
 }
+
+export function useIntersectionObserver() {
+  const [entry, setEntry] = useState({});
+  const [node, setNode] = useState(null);
+
+  const observer = useRef(null);
+
+  useEffect(() => {
+    if (observer.current) {
+      observer.current.disconnect();
+    }
+
+    observer.current = new IntersectionObserver((entries) => {
+      window.requestAnimationFrame(() => {
+        setEntry(entries[0]);
+      });
+    });
+
+    if (node) {
+      observer.current.observe(node);
+    }
+
+    return () => {
+      observer.current.disconnect();
+    };
+  }, [node]);
+
+  return [entry, setNode];
+}