@rooks/use-mutation-observer - npm Package Compare versions

Comparing version 3.0.0-alpha.1 to 3.0.0-alpha.3

index.d.ts

@@ -1,10 +0,16 @@
-import { Ref } from "react";
-
-export default function useMutationObserver(
-  ref: Ref<HTMLElement>,
-  callback: (
-    mutationList: [MutationRecord],
-    observer: MutationObserver
-  ) => void,
-  options?: MutationObserverInit
-): void;
+/// <reference types="react" />
+declare module "index" {
+    import { MutableRefObject } from "react";
+    /**
+     *
+     * useMutationObserver hook
+     *
+     * Returns a mutation observer for a React Ref and fires a callback
+     *
+     * @param {MutableRefObject<HTMLElement>} ref React ref on which mutations are to be observed
+     * @param {MutationCallback} callback Function that needs to be fired on mutation
+     * @param {MutationObserverInit} options
+     */
+    function useMutationObserver(ref: MutableRefObject<HTMLElement>, callback: MutationCallback, options?: MutationObserverInit): void;
+    export default useMutationObserver;
+}

lib/index.browser.cjs.js

@@ -5,7 +5,34 @@ 'use strict';
 
-var config={attributes:!0,characterData:!0,subtree:!0,childList:!0};function useMutationObserver(a,b){var c=2<arguments.length&&arguments[2]!==void 0?arguments[2]:config;react.useEffect(function(){// Create an observer instance linked to the callback function
-if(a.current){var d=new MutationObserver(function(a,c){b(a,c);});// Start observing the target node for configured mutations
-return d.observe(a.current,c),function(){d.disconnect();}}},[a.current,b,c]);}
+var config = {
+    attributes: true,
+    characterData: true,
+    subtree: true,
+    childList: true
+};
+/**
+ *
+ * useMutationObserver hook
+ *
+ * Returns a mutation observer for a React Ref and fires a callback
+ *
+ * @param {MutableRefObject<HTMLElement>} ref React ref on which mutations are to be observed
+ * @param {MutationCallback} callback Function that needs to be fired on mutation
+ * @param {MutationObserverInit} options
+ */
+function useMutationObserver(ref, callback, options) {
+    if (options === void 0) { options = config; }
+    react.useEffect(function () {
+        // Create an observer instance linked to the callback function
+        if (ref.current) {
+            var observer_1 = new MutationObserver(callback);
+            // Start observing the target node for configured mutations
+            observer_1.observe(ref.current, options);
+            return function () {
+                observer_1.disconnect();
+            };
+        }
+    }, [ref.current, callback, options]);
+}
 
 module.exports = useMutationObserver;
 //# sourceMappingURL=index.browser.cjs.js.map

lib/index.browser.esm.js

 import { useEffect } from 'react';
 
-var config={attributes:!0,characterData:!0,subtree:!0,childList:!0};function useMutationObserver(a,b){var c=2<arguments.length&&arguments[2]!==void 0?arguments[2]:config;useEffect(function(){// Create an observer instance linked to the callback function
-if(a.current){var d=new MutationObserver(function(a,c){b(a,c);});// Start observing the target node for configured mutations
-return d.observe(a.current,c),function(){d.disconnect();}}},[a.current,b,c]);}
+var config = {
+    attributes: true,
+    characterData: true,
+    subtree: true,
+    childList: true
+};
+/**
+ *
+ * useMutationObserver hook
+ *
+ * Returns a mutation observer for a React Ref and fires a callback
+ *
+ * @param {MutableRefObject<HTMLElement>} ref React ref on which mutations are to be observed
+ * @param {MutationCallback} callback Function that needs to be fired on mutation
+ * @param {MutationObserverInit} options
+ */
+function useMutationObserver(ref, callback, options) {
+    if (options === void 0) { options = config; }
+    useEffect(function () {
+        // Create an observer instance linked to the callback function
+        if (ref.current) {
+            var observer_1 = new MutationObserver(callback);
+            // Start observing the target node for configured mutations
+            observer_1.observe(ref.current, options);
+            return function () {
+                observer_1.disconnect();
+            };
+        }
+    }, [ref.current, callback, options]);
+}
 
 export default useMutationObserver;
 //# sourceMappingURL=index.browser.esm.js.map

lib/index.cjs.js

@@ -5,7 +5,34 @@ 'use strict';
 
-var config={attributes:!0,characterData:!0,subtree:!0,childList:!0};function useMutationObserver(a,b){var c=2<arguments.length&&arguments[2]!==void 0?arguments[2]:config;react.useEffect(function(){// Create an observer instance linked to the callback function
-if(a.current){var d=new MutationObserver(function(a,c){b(a,c);});// Start observing the target node for configured mutations
-return d.observe(a.current,c),function(){d.disconnect();}}},[a.current,b,c]);}
+var config = {
+    attributes: true,
+    characterData: true,
+    subtree: true,
+    childList: true
+};
+/**
+ *
+ * useMutationObserver hook
+ *
+ * Returns a mutation observer for a React Ref and fires a callback
+ *
+ * @param {MutableRefObject<HTMLElement>} ref React ref on which mutations are to be observed
+ * @param {MutationCallback} callback Function that needs to be fired on mutation
+ * @param {MutationObserverInit} options
+ */
+function useMutationObserver(ref, callback, options) {
+    if (options === void 0) { options = config; }
+    react.useEffect(function () {
+        // Create an observer instance linked to the callback function
+        if (ref.current) {
+            var observer_1 = new MutationObserver(callback);
+            // Start observing the target node for configured mutations
+            observer_1.observe(ref.current, options);
+            return function () {
+                observer_1.disconnect();
+            };
+        }
+    }, [ref.current, callback, options]);
+}
 
 module.exports = useMutationObserver;
 //# sourceMappingURL=index.cjs.js.map

lib/index.esm.js

 import { useEffect } from 'react';
 
-var config={attributes:!0,characterData:!0,subtree:!0,childList:!0};function useMutationObserver(a,b){var c=2<arguments.length&&arguments[2]!==void 0?arguments[2]:config;useEffect(function(){// Create an observer instance linked to the callback function
-if(a.current){var d=new MutationObserver(function(a,c){b(a,c);});// Start observing the target node for configured mutations
-return d.observe(a.current,c),function(){d.disconnect();}}},[a.current,b,c]);}
+var config = {
+    attributes: true,
+    characterData: true,
+    subtree: true,
+    childList: true
+};
+/**
+ *
+ * useMutationObserver hook
+ *
+ * Returns a mutation observer for a React Ref and fires a callback
+ *
+ * @param {MutableRefObject<HTMLElement>} ref React ref on which mutations are to be observed
+ * @param {MutationCallback} callback Function that needs to be fired on mutation
+ * @param {MutationObserverInit} options
+ */
+function useMutationObserver(ref, callback, options) {
+    if (options === void 0) { options = config; }
+    useEffect(function () {
+        // Create an observer instance linked to the callback function
+        if (ref.current) {
+            var observer_1 = new MutationObserver(callback);
+            // Start observing the target node for configured mutations
+            observer_1.observe(ref.current, options);
+            return function () {
+                observer_1.disconnect();
+            };
+        }
+    }, [ref.current, callback, options]);
+}
 
 export default useMutationObserver;
 //# sourceMappingURL=index.esm.js.map

lib/index.js

@@ -7,5 +7,32 @@ (function (global, factory) {
 
-  var config={attributes:!0,characterData:!0,subtree:!0,childList:!0};function useMutationObserver(a,b){var c=2<arguments.length&&arguments[2]!==void 0?arguments[2]:config;react.useEffect(function(){// Create an observer instance linked to the callback function
-  if(a.current){var d=new MutationObserver(function(a,c){b(a,c);});// Start observing the target node for configured mutations
-  return d.observe(a.current,c),function(){d.disconnect();}}},[a.current,b,c]);}
+  var config = {
+      attributes: true,
+      characterData: true,
+      subtree: true,
+      childList: true
+  };
+  /**
+   *
+   * useMutationObserver hook
+   *
+   * Returns a mutation observer for a React Ref and fires a callback
+   *
+   * @param {MutableRefObject<HTMLElement>} ref React ref on which mutations are to be observed
+   * @param {MutationCallback} callback Function that needs to be fired on mutation
+   * @param {MutationObserverInit} options
+   */
+  function useMutationObserver(ref, callback, options) {
+      if (options === void 0) { options = config; }
+      react.useEffect(function () {
+          // Create an observer instance linked to the callback function
+          if (ref.current) {
+              var observer_1 = new MutationObserver(callback);
+              // Start observing the target node for configured mutations
+              observer_1.observe(ref.current, options);
+              return function () {
+                  observer_1.disconnect();
+              };
+          }
+      }, [ref.current, callback, options]);
+  }
 
@@ -12,0 +39,0 @@ return useMutationObserver;

lib/index.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):(e=e||self).useMutationObserver=t(e.React)}(this,function(e){"use strict";var t={attributes:!0,characterData:!0,subtree:!0,childList:!0};return function(n,r){var u=2<arguments.length&&void 0!==arguments[2]?arguments[2]:t;e.useEffect(function(){if(n.current){var e=new MutationObserver(function(e,t){r(e,t)});return e.observe(n.current,u),function(){e.disconnect()}}},[n.current,r,u])}});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):(e=e||self).useMutationObserver=t(e.React)}(this,function(e){"use strict";var t={attributes:!0,characterData:!0,subtree:!0,childList:!0};return function(r,n,u){void 0===u&&(u=t),e.useEffect(function(){if(r.current){var e=new MutationObserver(n);return e.observe(r.current,u),function(){e.disconnect()}}},[r.current,n,u])}});
 //# sourceMappingURL=index.min.js.map

package.json

@@ -5,2 +5,3 @@ {
   "module": "lib/index.esm.js",
+  "types": "index.d.ts",
   "license": "MIT",
@@ -18,3 +19,5 @@ "description": "A React Hooks package for mutation-observer",
     "build": "rollup -c ../../scripts/rollup.config.js",
-    "prepublish": "yarn run build"
+    "prepublish": "yarn run build",
+    "pregenerate:types": "rimraf index.d.ts",
+    "generate:types": "tsc"
   },
@@ -31,3 +34,3 @@ "keywords": [
   ],
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-alpha.3",
   "_id": "@rooks/use-mutation-observer@",
@@ -41,3 +44,3 @@ "publishConfig": {
   },
-  "gitHead": "18191018f77a3b7a1823c6b79774f017109a60c8"
+  "gitHead": "e501b61df360375819f92ea53499ac11ac87187c"
 }

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

64585

increased by7.54%

Number of package files

30

increased by3.45%

Lines of code

623

increased by31.16%

No dependency changes