react-in-viewport - npm Package Compare versions

Comparing version 1.0.0-beta.2 to 1.0.0-beta.3

dist/__tests__/index.js

@@ -7,4 +7,4 @@ "use strict";
 var _jsxRuntime = require("react/jsx-runtime");
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _inheritsLoose(t, o) { t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
 var DemoClass = /*#__PURE__*/function (_PureComponent) {
@@ -35,3 +35,3 @@ _inheritsLoose(DemoClass, _PureComponent);
     var TestNode = (0, _index.handleViewport)(DemoClass);
-    var _render = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(TestNode, {})),
+    var _render = (0, _react2.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(TestNode, {})),
       getByTestId = _render.getByTestId;
@@ -38,0 +38,0 @@ expect(getByTestId('content').innerHTML).toEqual('not in viewport');

dist/es/index.js

@@ -9,6 +9,4 @@ "use strict";
 exports.useInViewport = _useInViewport.default;
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var customProps = ['inViewport', 'enterCount', 'leaveCount'];
-exports.customProps = customProps;
-var _default = _handleViewport.default;
-exports.default = _default;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var customProps = exports.customProps = ['inViewport', 'enterCount', 'leaveCount'];
+var _default = exports.default = _handleViewport.default;

dist/es/lib/constants.js

@@ -5,14 +5,11 @@ "use strict";
 exports.noop = exports.defaultProps = exports.defaultOptions = exports.defaultConfig = void 0;
-var defaultOptions = {};
-exports.defaultOptions = defaultOptions;
-var defaultConfig = {
+var defaultOptions = exports.defaultOptions = {};
+var defaultConfig = exports.defaultConfig = {
   disconnectOnLeave: false
 };
-exports.defaultConfig = defaultConfig;
 var noop = () => {};
 exports.noop = noop;
-var defaultProps = {
+var defaultProps = exports.defaultProps = {
   onEnterViewport: noop,
   onLeaveViewport: noop
-};
-exports.defaultProps = defaultProps;
+};

dist/es/lib/handleViewport.js

@@ -11,5 +11,5 @@ "use strict";
 var _excluded = ["onEnterViewport", "onLeaveViewport"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function handleViewport(TargetComponent, options, config) {
@@ -27,3 +27,2 @@ if (options === void 0) {
     };
-
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(TargetComponent, _extends({}, props, refProps));
@@ -59,3 +58,2 @@ });
 }
-var _default = handleViewport;
-exports.default = _default;
+var _default = exports.default = handleViewport;

dist/es/lib/useInViewport.js

@@ -7,2 +7,28 @@ "use strict";
 var _constants = require("./constants");
+var useDOMObserver = function useDOMObserver(ref, onChange, options) {
+  if (options === void 0) {
+    options = {
+      attributes: true,
+      childList: true,
+      subtree: true
+    };
+  }
+  (0, _react.useEffect)(() => {
+    var currentElement = ref.current;
+    var observer;
+    if (currentElement) {
+      observer = new MutationObserver(onChange);
+
+      // Start observing the DOM element for mutations
+      observer.observe(currentElement, options);
+    }
+
+    // Cleanup function to stop observing when the component unmounts
+    return () => {
+      if (observer) {
+        observer.disconnect();
+      }
+    };
+  }, [ref, onChange, options]);
+};
 var useInViewport = function useInViewport(target, options, config, props) {
@@ -95,8 +121,6 @@ if (options === void 0) {
   }
-  (0, _react.useEffect)(() => {
-    var observerRef = observer.current;
-    // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
-    observerRef = initIntersectionObserver({
+  var attachObserver = (0, _react.useCallback)(_ref4 => {
+    var {
       observerRef
-    });
+    } = _ref4;
     startObserver({
@@ -110,3 +134,22 @@ observerRef
     };
-  }, [target.current, options, config, onEnterViewport, onLeaveViewport]);
+  }, []);
+  var handleMutation = (0, _react.useCallback)(() => {
+    var observerRef = observer.current;
+    attachObserver({
+      observerRef
+    });
+  }, []);
+  (0, _react.useEffect)(() => {
+    var observerRef = observer.current;
+    // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
+    observerRef = initIntersectionObserver({
+      observerRef
+    });
+    attachObserver({
+      observerRef
+    });
+  }, [options, config, onEnterViewport, onLeaveViewport]);
+
+  // handles when ref changes
+  useDOMObserver(target, handleMutation);
   return {
@@ -118,3 +161,2 @@ inViewport: inViewportRef.current,
 };
-var _default = useInViewport;
-exports.default = _default;
+var _default = exports.default = useInViewport;

dist/index.js

@@ -9,6 +9,4 @@ "use strict";
 exports.useInViewport = _useInViewport["default"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var customProps = ['inViewport', 'enterCount', 'leaveCount'];
-exports.customProps = customProps;
-var _default = _handleViewport["default"];
-exports["default"] = _default;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var customProps = exports.customProps = ['inViewport', 'enterCount', 'leaveCount'];
+var _default = exports["default"] = _handleViewport["default"];

dist/lib/constants.js

@@ -5,14 +5,10 @@ "use strict";
 exports.noop = exports.defaultProps = exports.defaultOptions = exports.defaultConfig = void 0;
-var defaultOptions = {};
-exports.defaultOptions = defaultOptions;
-var defaultConfig = {
+var defaultOptions = exports.defaultOptions = {};
+var defaultConfig = exports.defaultConfig = {
   disconnectOnLeave: false
 };
-exports.defaultConfig = defaultConfig;
-var noop = function noop() {};
-exports.noop = noop;
-var defaultProps = {
+var noop = exports.noop = function noop() {};
+var defaultProps = exports.defaultProps = {
   onEnterViewport: noop,
   onLeaveViewport: noop
-};
-exports.defaultProps = defaultProps;
+};

dist/lib/handleViewport.js

@@ -11,5 +11,5 @@ "use strict";
 var _excluded = ["onEnterViewport", "onLeaveViewport"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function handleViewport(TargetComponent, options, config) {
@@ -27,3 +27,2 @@ if (options === void 0) {
     };
-
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(TargetComponent, _extends({}, props, refProps));
@@ -58,3 +57,2 @@ });
 }
-var _default = handleViewport;
-exports["default"] = _default;
+var _default = exports["default"] = handleViewport;

dist/lib/useInViewport.js

@@ -7,2 +7,28 @@ "use strict";
 var _constants = require("./constants");
+var useDOMObserver = function useDOMObserver(ref, onChange, options) {
+  if (options === void 0) {
+    options = {
+      attributes: true,
+      childList: true,
+      subtree: true
+    };
+  }
+  (0, _react.useEffect)(function () {
+    var currentElement = ref.current;
+    var observer;
+    if (currentElement) {
+      observer = new MutationObserver(onChange);
+
+      // Start observing the DOM element for mutations
+      observer.observe(currentElement, options);
+    }
+
+    // Cleanup function to stop observing when the component unmounts
+    return function () {
+      if (observer) {
+        observer.disconnect();
+      }
+    };
+  }, [ref, onChange, options]);
+};
 var useInViewport = function useInViewport(target, options, config, props) {
@@ -87,2 +113,19 @@ if (options === void 0) {
   }
+  var attachObserver = (0, _react.useCallback)(function (_ref4) {
+    var observerRef = _ref4.observerRef;
+    startObserver({
+      observerRef: observerRef
+    });
+    return function () {
+      stopObserver({
+        observerRef: observerRef
+      });
+    };
+  }, []);
+  var handleMutation = (0, _react.useCallback)(function () {
+    var observerRef = observer.current;
+    attachObserver({
+      observerRef: observerRef
+    });
+  }, []);
   (0, _react.useEffect)(function () {
@@ -94,11 +137,9 @@ var observerRef = observer.current;
     });
-    startObserver({
+    attachObserver({
       observerRef: observerRef
     });
-    return function () {
-      stopObserver({
-        observerRef: observerRef
-      });
-    };
-  }, [target.current, options, config, onEnterViewport, onLeaveViewport]);
+  }, [options, config, onEnterViewport, onLeaveViewport]);
+
+  // handles when ref changes
+  useDOMObserver(target, handleMutation);
   return {
@@ -110,3 +151,2 @@ inViewport: inViewportRef.current,
 };
-var _default = useInViewport;
-exports["default"] = _default;
+var _default = exports["default"] = useInViewport;

dist/next/lib/handleViewport.js

 var _excluded = ["onEnterViewport", "onLeaveViewport"];
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { useRef, forwardRef } from 'react';
@@ -21,3 +21,2 @@ import hoistNonReactStatic from 'hoist-non-react-statics';
     };
-
     return /*#__PURE__*/_jsx(TargetComponent, _extends({}, props, refProps));
@@ -24,0 +23,0 @@ });

dist/next/lib/useInViewport.js

@@ -1,3 +0,29 @@
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { defaultOptions, defaultConfig, defaultProps } from './constants';
+var useDOMObserver = function useDOMObserver(ref, onChange, options) {
+  if (options === void 0) {
+    options = {
+      attributes: true,
+      childList: true,
+      subtree: true
+    };
+  }
+  useEffect(function () {
+    var currentElement = ref.current;
+    var observer;
+    if (currentElement) {
+      observer = new MutationObserver(onChange);
+
+      // Start observing the DOM element for mutations
+      observer.observe(currentElement, options);
+    }
+
+    // Cleanup function to stop observing when the component unmounts
+    return function () {
+      if (observer) {
+        observer.disconnect();
+      }
+    };
+  }, [ref, onChange, options]);
+};
 var useInViewport = function useInViewport(target, options, config, props) {
@@ -82,2 +108,19 @@ if (options === void 0) {
   }
+  var attachObserver = useCallback(function (_ref4) {
+    var observerRef = _ref4.observerRef;
+    startObserver({
+      observerRef: observerRef
+    });
+    return function () {
+      stopObserver({
+        observerRef: observerRef
+      });
+    };
+  }, []);
+  var handleMutation = useCallback(function () {
+    var observerRef = observer.current;
+    attachObserver({
+      observerRef: observerRef
+    });
+  }, []);
   useEffect(function () {
@@ -89,11 +132,9 @@ var observerRef = observer.current;
     });
-    startObserver({
+    attachObserver({
       observerRef: observerRef
     });
-    return function () {
-      stopObserver({
-        observerRef: observerRef
-      });
-    };
-  }, [target.current, options, config, onEnterViewport, onLeaveViewport]);
+  }, [options, config, onEnterViewport, onLeaveViewport]);
+
+  // handles when ref changes
+  useDOMObserver(target, handleMutation);
   return {
@@ -100,0 +141,0 @@ inViewport: inViewportRef.current,

dist/stories/chapters/enterCallback.stories.js

@@ -11,7 +11,7 @@ "use strict";
 var _excluded = ["forwardedRef", "inViewport"]; // eslint-disable-line import/no-named-as-default
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
 var ViewportBlock = (0, _index["default"])(_themeComponent.Block, {}, {
@@ -38,3 +38,3 @@ disconnectOnLeave: false
 });
-var _default = {
+var _default = exports["default"] = {
   title: 'Enter Callback',
@@ -54,4 +54,3 @@ component: ViewportBlock,
 };
-exports["default"] = _default;
-var ClassBaseComponent = function ClassBaseComponent() {
+var ClassBaseComponent = exports.ClassBaseComponent = function ClassBaseComponent() {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ViewportBlock, {
@@ -66,4 +65,3 @@ onEnterViewport: function onEnterViewport() {
 };
-exports.ClassBaseComponent = ClassBaseComponent;
-var FunctionalComponent = function FunctionalComponent() {
+var FunctionalComponent = exports.FunctionalComponent = function FunctionalComponent() {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ViewportAnchor, {
@@ -77,3 +75,2 @@ onEnterViewport: function onEnterViewport() {
   });
-};
-exports.FunctionalComponent = FunctionalComponent;
+};

dist/stories/chapters/lazyMedia.stories.js

@@ -11,4 +11,4 @@ "use strict";
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var _default = {
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var _default = exports["default"] = {
   title: 'Lazy Media',
@@ -28,4 +28,3 @@ component: _themeComponent.Card,
 };
-exports["default"] = _default;
-var ClassComponentLazyloadImage = function ClassComponentLazyloadImage() {
+var ClassComponentLazyloadImage = exports.ClassComponentLazyloadImage = function ClassComponentLazyloadImage() {
   var imageArray = [{
@@ -51,4 +50,3 @@ src: 'https://s-media-cache-ak0.pinimg.com/originals/cf/31/83/cf31837a53dc1cdb13880ac38c66d70d.jpg',
 };
-exports.ClassComponentLazyloadImage = ClassComponentLazyloadImage;
-var ClassComponentLazyloadIframe = function ClassComponentLazyloadIframe() {
+var ClassComponentLazyloadIframe = exports.ClassComponentLazyloadIframe = function ClassComponentLazyloadIframe() {
   var iframeArray = [{
@@ -74,4 +72,3 @@ src: 'https://www.youtube.com/embed/hTcBnxxuAls',
 };
-exports.ClassComponentLazyloadIframe = ClassComponentLazyloadIframe;
-var FunctionalComponentLazyloadImage = function FunctionalComponentLazyloadImage() {
+var FunctionalComponentLazyloadImage = exports.FunctionalComponentLazyloadImage = function FunctionalComponentLazyloadImage() {
   var imageArray = [{
@@ -97,4 +94,3 @@ src: 'https://s-media-cache-ak0.pinimg.com/originals/cf/31/83/cf31837a53dc1cdb13880ac38c66d70d.jpg',
 };
-exports.FunctionalComponentLazyloadImage = FunctionalComponentLazyloadImage;
-var FunctionalComponentLazyloadIframe = function FunctionalComponentLazyloadIframe() {
+var FunctionalComponentLazyloadIframe = exports.FunctionalComponentLazyloadIframe = function FunctionalComponentLazyloadIframe() {
   var iframeArray = [{
@@ -119,3 +115,2 @@ src: 'https://www.youtube.com/embed/hTcBnxxuAls',
   });
-};
-exports.FunctionalComponentLazyloadIframe = FunctionalComponentLazyloadIframe;
+};

dist/stories/chapters/transition.stories.js

@@ -8,4 +8,4 @@ "use strict";
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var _default = {
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var _default = exports["default"] = {
   title: 'Transition',
@@ -24,6 +24,4 @@ decorators: [function (Story) {
 };
-exports["default"] = _default;
-var ClassComponentTransition = function ClassComponentTransition() {
+var ClassComponentTransition = exports.ClassComponentTransition = function ClassComponentTransition() {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Section["default"], {});
-};
-exports.ClassComponentTransition = ClassComponentTransition;
+};

dist/stories/common/constants.js

@@ -5,9 +5,5 @@ "use strict";
 exports.LOADING = exports.LOADED = exports.INIT = exports.ERROR = void 0;
-var ERROR = -1;
-exports.ERROR = ERROR;
-var INIT = 0;
-exports.INIT = INIT;
-var LOADING = 1;
-exports.LOADING = LOADING;
-var LOADED = 2;
-exports.LOADED = LOADED;
+var ERROR = exports.ERROR = -1;
+var INIT = exports.INIT = 0;
+var LOADING = exports.LOADING = 1;
+var LOADED = exports.LOADED = 2;

dist/stories/common/Iframe.js

@@ -9,5 +9,5 @@ "use strict";
 var _jsxRuntime = require("react/jsx-runtime");
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _inheritsLoose(t, o) { t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
 var Iframe = /*#__PURE__*/function (_PureComponent) {
@@ -56,3 +56,2 @@ _inheritsLoose(Iframe, _PureComponent);
 });
-var _default = LazyIframe;
-exports["default"] = _default;
+var _default = exports["default"] = LazyIframe;

dist/stories/common/IframeFunctional.js

@@ -9,5 +9,5 @@ "use strict";
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var IframeFunctional = function IframeFunctional(props) {
@@ -41,6 +41,5 @@ var inViewport = props.inViewport,
 };
-var LazyIframe = (0, _index.handleViewport)( /*#__PURE__*/(0, _react.memo)(IframeFunctional), {}, {
+var LazyIframe = (0, _index.handleViewport)(/*#__PURE__*/(0, _react.memo)(IframeFunctional), {}, {
   disconnectOnLeave: true
 });
-var _default = LazyIframe;
-exports["default"] = _default;
+var _default = exports["default"] = LazyIframe;

dist/stories/common/Image.js

@@ -10,4 +10,4 @@ "use strict";
 var _jsxRuntime = require("react/jsx-runtime");
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _inheritsLoose(t, o) { t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
 var DUMMY_IMAGE_SRC = 'https://www.gstatic.com/psa/static/1.gif';
@@ -84,3 +84,2 @@ var ImageObject = /*#__PURE__*/function (_PureComponent) {
 });
-var _default = LazyImage;
-exports["default"] = _default;
+var _default = exports["default"] = LazyImage;

dist/stories/common/ImageFunctional.js

@@ -66,3 +66,2 @@ "use strict";
 });
-var _default = LazyImage;
-exports["default"] = _default;
+var _default = exports["default"] = LazyImage;

dist/stories/common/Section.js

@@ -8,5 +8,5 @@ "use strict";
 var _jsxRuntime = require("react/jsx-runtime");
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _inheritsLoose(t, o) { t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
 var MySectionBlock = /*#__PURE__*/function (_PureComponent) {
@@ -68,3 +68,2 @@ _inheritsLoose(MySectionBlock, _PureComponent);
 });
-var _default = SectionWithTransition;
-exports["default"] = _default;
+var _default = exports["default"] = SectionWithTransition;

dist/stories/common/themeComponent.js

@@ -7,7 +7,7 @@ "use strict";
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-var PageTitle = /*#__PURE__*/(0, _react.memo)(function (_ref) {
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _inheritsLoose(t, o) { t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+var PageTitle = exports.PageTitle = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var _ref$title = _ref.title,
@@ -39,5 +39,4 @@ title = _ref$title === void 0 ? 'React In Viewport' : _ref$title,
 });
-exports.PageTitle = PageTitle;
 PageTitle.displayName = 'PageTitle';
-var Card = /*#__PURE__*/function (_React$PureComponent) {
+var Card = exports.Card = /*#__PURE__*/function (_React$PureComponent) {
   _inheritsLoose(Card, _React$PureComponent);
@@ -68,5 +67,4 @@ function Card() {
 }(_react["default"].PureComponent);
-exports.Card = Card;
 Card.displayName = 'Card';
-var Block = function Block(props) {
+var Block = exports.Block = function Block(props) {
   var inViewport = props.inViewport,
@@ -92,5 +90,4 @@ enterCount = props.enterCount,
 };
-exports.Block = Block;
 Block.displayName = 'Block';
-var Spacer = function Spacer() {
+var Spacer = exports.Spacer = function Spacer() {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -110,3 +107,2 @@ style: {
 };
-exports.Spacer = Spacer;
 Spacer.displayName = Spacer;

dist/types/lib/useInViewport.js

@@ -5,2 +5,23 @@ "use strict";
 const constants_1 = require("./constants");
+const useDOMObserver = (ref, onChange, options = {
+    attributes: true,
+    childList: true,
+    subtree: true,
+}) => {
+    (0, react_1.useEffect)(() => {
+        const currentElement = ref.current;
+        let observer;
+        if (currentElement) {
+            observer = new MutationObserver(onChange);
+            // Start observing the DOM element for mutations
+            observer.observe(currentElement, options);
+        }
+        // Cleanup function to stop observing when the component unmounts
+        return () => {
+            if (observer) {
+                observer.disconnect();
+            }
+        };
+    }, [ref, onChange, options]);
+};
 const useInViewport = (target, options = constants_1.defaultOptions, config = constants_1.defaultConfig, props = constants_1.defaultProps) => {
@@ -69,6 +90,3 @@ const { onEnterViewport, onLeaveViewport } = props;
     }
-    (0, react_1.useEffect)(() => {
-        let observerRef = observer.current;
-        // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
-        observerRef = initIntersectionObserver({ observerRef });
+    const attachObserver = (0, react_1.useCallback)(({ observerRef }) => {
         startObserver({
@@ -82,3 +100,15 @@ observerRef,
         };
-    }, [target.current, options, config, onEnterViewport, onLeaveViewport]);
+    }, []);
+    const handleMutation = (0, react_1.useCallback)(() => {
+        const observerRef = observer.current;
+        attachObserver({ observerRef });
+    }, []);
+    (0, react_1.useEffect)(() => {
+        let observerRef = observer.current;
+        // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
+        observerRef = initIntersectionObserver({ observerRef });
+        attachObserver({ observerRef });
+    }, [options, config, onEnterViewport, onLeaveViewport]);
+    // handles when ref changes
+    useDOMObserver(target, handleMutation);
     return {
@@ -85,0 +115,0 @@ inViewport: inViewportRef.current,

dist/umd/index.js

@@ -22,7 +22,5 @@ (function (global, factory) {
   _exports.useInViewport = _useInViewport["default"];
-  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-  var customProps = ['inViewport', 'enterCount', 'leaveCount'];
-  _exports.customProps = customProps;
-  var _default = _handleViewport["default"];
-  _exports["default"] = _default;
+  function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+  var customProps = _exports.customProps = ['inViewport', 'enterCount', 'leaveCount'];
+  var _default = _exports["default"] = _handleViewport["default"];
 });

dist/umd/lib/constants.js

@@ -18,15 +18,11 @@ (function (global, factory) {
   _exports.noop = _exports.defaultProps = _exports.defaultOptions = _exports.defaultConfig = void 0;
-  var defaultOptions = {};
-  _exports.defaultOptions = defaultOptions;
-  var defaultConfig = {
+  var defaultOptions = _exports.defaultOptions = {};
+  var defaultConfig = _exports.defaultConfig = {
     disconnectOnLeave: false
   };
-  _exports.defaultConfig = defaultConfig;
-  var noop = function noop() {};
-  _exports.noop = noop;
-  var defaultProps = {
+  var noop = _exports.noop = function noop() {};
+  var defaultProps = _exports.defaultProps = {
     onEnterViewport: noop,
     onLeaveViewport: noop
   };
-  _exports.defaultProps = defaultProps;
 });

dist/umd/lib/handleViewport.js

@@ -21,5 +21,5 @@ (function (global, factory) {
   var _excluded = ["onEnterViewport", "onLeaveViewport"];
-  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+  function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+  function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+  function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
   function handleViewport(TargetComponent, options, config) {
@@ -37,3 +37,2 @@ if (options === void 0) {
       };
-
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(TargetComponent, _extends({}, props, refProps));
@@ -68,4 +67,3 @@ });
   }
-  var _default = handleViewport;
-  _exports["default"] = _default;
+  var _default = _exports["default"] = handleViewport;
 });

dist/umd/lib/useInViewport.js

@@ -18,2 +18,28 @@ (function (global, factory) {
   _exports["default"] = void 0;
+  var useDOMObserver = function useDOMObserver(ref, onChange, options) {
+    if (options === void 0) {
+      options = {
+        attributes: true,
+        childList: true,
+        subtree: true
+      };
+    }
+    (0, _react.useEffect)(function () {
+      var currentElement = ref.current;
+      var observer;
+      if (currentElement) {
+        observer = new MutationObserver(onChange);
+
+        // Start observing the DOM element for mutations
+        observer.observe(currentElement, options);
+      }
+
+      // Cleanup function to stop observing when the component unmounts
+      return function () {
+        if (observer) {
+          observer.disconnect();
+        }
+      };
+    }, [ref, onChange, options]);
+  };
   var useInViewport = function useInViewport(target, options, config, props) {
@@ -98,2 +124,19 @@ if (options === void 0) {
     }
+    var attachObserver = (0, _react.useCallback)(function (_ref4) {
+      var observerRef = _ref4.observerRef;
+      startObserver({
+        observerRef: observerRef
+      });
+      return function () {
+        stopObserver({
+          observerRef: observerRef
+        });
+      };
+    }, []);
+    var handleMutation = (0, _react.useCallback)(function () {
+      var observerRef = observer.current;
+      attachObserver({
+        observerRef: observerRef
+      });
+    }, []);
     (0, _react.useEffect)(function () {
@@ -105,11 +148,9 @@ var observerRef = observer.current;
       });
-      startObserver({
+      attachObserver({
         observerRef: observerRef
       });
-      return function () {
-        stopObserver({
-          observerRef: observerRef
-        });
-      };
-    }, [target.current, options, config, onEnterViewport, onLeaveViewport]);
+    }, [options, config, onEnterViewport, onLeaveViewport]);
+
+    // handles when ref changes
+    useDOMObserver(target, handleMutation);
     return {
@@ -121,4 +162,3 @@ inViewport: inViewportRef.current,
   };
-  var _default = useInViewport;
-  _exports["default"] = _default;
+  var _default = _exports["default"] = useInViewport;
 });

package.json

 {
   "name": "react-in-viewport",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.3",
   "description": "Track React component in viewport using Intersection Observer API",
@@ -39,8 +39,8 @@ "author": "Roderick Hsiao <[e-mail]>",
     "@babel/preset-typescript": "^7.16.7",
-    "@storybook/addon-actions": "^8.0.9",
-    "@storybook/addon-docs": "^8.0.9",
-    "@storybook/addon-essentials": "^8.0.9",
+    "@storybook/addon-actions": "^8.3.2",
+    "@storybook/addon-docs": "^8.3.2",
+    "@storybook/addon-essentials": "^8.3.2",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/react": "^8.0.9",
-    "@storybook/react-webpack5": "^8.0.9",
+    "@storybook/react": "^8.3.2",
+    "@storybook/react-webpack5": "^8.3.2",
     "@testing-library/react": "^14.0.0",
@@ -75,3 +75,3 @@ "@types/hoist-non-react-statics": "^3.3.1",
     "react-test-renderer": "^18.0.0",
-    "storybook": "^8.0.9",
+    "storybook": "^8.3.2",
     "typescript": "^5.0.0",
@@ -78,0 +78,0 @@ "webpack": "^5.75.0"

README.md

@@ -10,4 +10,6 @@ <p align="center">
 
-Library to detect whether or not a component is in the viewport, using the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
+Library to detect whether or not a component is in the viewport, using the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).
 
+This library also uses [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) to detect the change of the target element.
+
 ```npm install --save react-in-viewport```
@@ -14,0 +16,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

108637

increased by2.16%

Lines of code

1819

increased by7%

Number of lines in readme file

191

increased by1.06%

No dependency changes