@indietabletop/appkit 3.4.0 → 3.5.0

package/lib/index.ts

@@ -18,6 +18,7 @@ export * from "./use-is-installed.ts";
 export * from "./use-media-query.ts";
 export * from "./use-reverting-state.ts";
 export * from "./use-scroll-restoration.ts";
+export * from "./useIsVisible.ts";
 
 // Utils
 export * from "./append-copy-to-text.ts";

package/lib/useIsVisible.ts

@@ -0,0 +1,27 @@
+import { useEffect, useRef, useState } from "react";
+
+export function useIsVisible<T extends HTMLElement>(
+  initialState = false,
+  options?: IntersectionObserverInit,
+) {
+  const ref = useRef<T | null>(null);
+  const [isVisible, setVisible] = useState(initialState);
+
+  useEffect(() => {
+    if (ref.current) {
+      const observer = new IntersectionObserver(([entry]) => {
+        if (entry) {
+          setVisible(entry.isIntersecting);
+        }
+      }, options);
+
+      observer.observe(ref.current);
+
+      return () => {
+        observer.disconnect();
+      };
+    }
+  });
+
+  return { ref, isVisible };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indietabletop/appkit",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "description": "A collection of modules used in apps built by Indie Tabletop Club",
   "private": false,
   "type": "module",