From 390ee8a551227b6f4d63a44a084e7029e2b22ceb Mon Sep 17 00:00:00 2001
From: Jeremy Scheff <jdscheff@gmail.com>
Date: Tue, 14 May 2024 13:48:56 -0400
Subject: [PATCH] Get rid of react-intersection-observer dependency

---
 package.json |  1 -
 src/Face.tsx | 45 +++++++++++++++++++++++++++++++++++++++------
 yarn.lock    |  5 -----
 3 files changed, 39 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index 1b4bb2d..5a9cdf5 100644
--- a/package.json
+++ b/package.json
@@ -69,7 +69,6 @@
     "zustand": "^4.5.2"
   },
   "dependencies": {
-    "react-intersection-observer": "^9.8.2",
     "svg-path-bbox": "1.2.5"
   },
   "peerDependencies": {
diff --git a/src/Face.tsx b/src/Face.tsx
index b47ac91..e305c47 100644
--- a/src/Face.tsx
+++ b/src/Face.tsx
@@ -1,9 +1,38 @@
-import { forwardRef, useLayoutEffect, useRef, type CSSProperties } from "react";
+import {
+  forwardRef,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type CSSProperties,
+} from "react";
 import { FaceConfig, Overrides } from "./types";
-import { useInView } from "react-intersection-observer";
 import { display } from "./display";
 import { deepCopy } from "./utils";
 
+const useIntersectionObserver = () => {
+  const [ref, setRef] = useState<HTMLElement | undefined>();
+  const [entry, setEntry] = useState<IntersectionObserverEntry | undefined>();
+
+  useEffect(() => {
+    if (!ref) {
+      return;
+    }
+
+    const observer = new IntersectionObserver(([entry]) => {
+      setEntry(entry);
+    });
+
+    observer.observe(ref);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [ref]);
+
+  return [setRef, entry] as const;
+};
+
 export const Face = forwardRef<
   HTMLDivElement,
   {
@@ -15,12 +44,16 @@ export const Face = forwardRef<
     style?: CSSProperties;
   }
 >(({ className, face, ignoreDisplayErrors, lazy, overrides, style }, ref) => {
-  const [inViewRef, inView] = useInView();
+  const [intersectionObserverRef, intersectionObserverEntry] =
+    useIntersectionObserver();
 
   const faceRef = useRef<HTMLDivElement>(null);
 
   useLayoutEffect(() => {
-    if ((inView || !lazy) && faceRef.current) {
+    if (
+      (intersectionObserverEntry?.isIntersecting || !lazy) &&
+      faceRef.current
+    ) {
       try {
         if (overrides) {
           // Only apply overrides if face is in viewport
@@ -34,7 +67,7 @@ export const Face = forwardRef<
         }
       }
     }
-  }, [inView, face, overrides]);
+  }, [intersectionObserverEntry, face, overrides]);
 
   return (
     <div
@@ -46,7 +79,7 @@ export const Face = forwardRef<
         }
         // @ts-expect-error
         faceRef.current = node;
-        inViewRef(node);
+        intersectionObserverRef(node);
       }}
       style={style}
     />
diff --git a/yarn.lock b/yarn.lock
index 6102d92..7a46d6a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5261,11 +5261,6 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
-react-intersection-observer@^9.8.2:
-  version "9.8.2"
-  resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-9.8.2.tgz#a45db2441909a4d2f310de381686e151f016691d"
-  integrity sha512-901naEiiZmse3p+AmtbQ3NL9xx+gQ8TXLiGDc+8GiE3JKJkNV3vP737aGuWTAXBA+1QqxPrDDE+fIEgYpGDlrQ==
-
 react-is@^18.0.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"