@ninetailed/experience.js-react 7.9.4-beta.0 → 7.11.0-beta.0

package/index.cjs.js

@@ -7,7 +7,6 @@ var React = require('react');
 var experience_js = require('@ninetailed/experience.js');
 var experience_jsShared = require('@ninetailed/experience.js-shared');
 var radash = require('radash');
-var reactIntersectionObserver = require('react-intersection-observer');
 var reactIs = require('react-is');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -142,12 +141,24 @@ const TrackHasSeenComponent = ({
   isPersonalized
 }) => {
   const ninetailed = useNinetailed();
-  const {
-    ref,
-    inView
-  } = reactIntersectionObserver.useInView({
-    triggerOnce: true
-  });
+  const [inView, setInView] = React.useState(false);
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    const observer = new IntersectionObserver(([entry]) => {
+      if (entry.isIntersecting) {
+        setInView(true);
+        // Disconnect the observer since we only want to track
+        // the first time the component is seen
+        observer.disconnect();
+      }
+    });
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
   React.useEffect(() => {
     if (experience_jsShared.isBrowser() && inView) {
       ninetailed.trackHasSeenComponent({

package/index.esm.js

@@ -3,7 +3,6 @@ import { Ninetailed, selectVariant, selectHasExperienceVariants } from '@ninetai
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { logger, isBrowser } from '@ninetailed/experience.js-shared';
 import { isEqual, get } from 'radash';
-import { useInView } from 'react-intersection-observer';
 import { isForwardRef } from 'react-is';
 
 const NinetailedContext = /*#__PURE__*/createContext(undefined);
@@ -121,12 +120,25 @@ const TrackHasSeenComponent = ({
   isPersonalized
 }) => {
   const ninetailed = useNinetailed();
-  const {
-    ref,
-    inView
-  } = useInView({
-    triggerOnce: true
-  });
+  const [inView, setInView] = useState(false);
+  const ref = useRef(null);
+  useEffect(() => {
+    const observer = new IntersectionObserver(([entry]) => {
+      if (entry.isIntersecting) {
+        setInView(true);
+
+        // Disconnect the observer since we only want to track
+        // the first time the component is seen
+        observer.disconnect();
+      }
+    });
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
   useEffect(() => {
     if (isBrowser() && inView) {
       ninetailed.trackHasSeenComponent({

package/package.json

@@ -1,16 +1,14 @@
 {
   "name": "@ninetailed/experience.js-react",
-  "version": "7.9.4-beta.0",
+  "version": "7.11.0-beta.0",
   "description": "Ninetailed SDK for React",
   "dependencies": {
-    "@ninetailed/experience.js": "7.9.4-beta.0",
-    "@ninetailed/experience.js-shared": "7.9.4-beta.0",
-    "@ninetailed/experience.js-plugin-analytics": "7.9.4-beta.0",
+    "@ninetailed/experience.js": "7.11.0-beta.0",
+    "@ninetailed/experience.js-shared": "7.11.0-beta.0",
+    "@ninetailed/experience.js-plugin-analytics": "7.11.0-beta.0",
     "radash": "10.9.0",
-    "react-intersection-observer": "8.34.0",
     "react-is": "18.2.0",
-    "@testing-library/react-hooks": "7.0.2",
-    "@testing-library/react": "13.4.0"
+    "@testing-library/react": "16.2.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0"