@restart/hooks - npm Package Compare versions

Comparing version 0.3.27 to 0.4.0

cjs/useIntersectionObserver.d.ts

@@ -6,5 +6,9 @@ /**
  * @param element The DOM element to observe
- * @param init IntersectionObserver options
+ * @param init IntersectionObserver options with a notable change,
+ * unlike a plain IntersectionObserver `root: null` means "not provided YET",
+ * and the hook will wait until it receives a non-null value to set up the observer.
+ * This change allows for easier syncing of element and root values in a React
+ * context.
  */
-declare function useIntersectionObserver<TElement extends Element>(element: TElement | null | undefined, options: IntersectionObserverInit): IntersectionObserverEntry[];
+declare function useIntersectionObserver<TElement extends Element>(element: TElement | null | undefined, options?: IntersectionObserverInit): IntersectionObserverEntry[];
 /**
@@ -17,5 +21,10 @@ * Setup an [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) on
  * @param callback A listener for intersection updates.
- * @param init IntersectionObserver options
+ * @param init IntersectionObserver options with a notable change,
+ * unlike a plain IntersectionObserver `root: null` means "not provided YET",
+ * and the hook will wait until it receives a non-null value to set up the observer.
+ * This change allows for easier syncing of element and root values in a React
+ * context.
+ *
  */
-declare function useIntersectionObserver<TElement extends Element>(element: TElement | null | undefined, callback: IntersectionObserverCallback, options: IntersectionObserverInit): void;
+declare function useIntersectionObserver<TElement extends Element>(element: TElement | null | undefined, callback: IntersectionObserverCallback, options?: IntersectionObserverInit): void;
 export default useIntersectionObserver;

cjs/useIntersectionObserver.js

@@ -36,5 +36,6 @@ "use strict";
 
-  var handler = (0, _useEventCallback.default)(callback || setEntry);
+  var handler = (0, _useEventCallback.default)(callback || setEntry); // We wait for element to exist before constructing
+
   var observer = (0, _useStableMemo.default)(function () {
-    return typeof IntersectionObserver !== 'undefined' && new IntersectionObserver(handler, {
+    return root !== null && typeof IntersectionObserver !== 'undefined' && new IntersectionObserver(handler, {
       threshold: threshold,
@@ -41,0 +42,0 @@ root: root,

esm/useIntersectionObserver.d.ts

@@ -6,5 +6,9 @@ /**
  * @param element The DOM element to observe
- * @param init IntersectionObserver options
+ * @param init IntersectionObserver options with a notable change,
+ * unlike a plain IntersectionObserver `root: null` means "not provided YET",
+ * and the hook will wait until it receives a non-null value to set up the observer.
+ * This change allows for easier syncing of element and root values in a React
+ * context.
  */
-declare function useIntersectionObserver<TElement extends Element>(element: TElement | null | undefined, options: IntersectionObserverInit): IntersectionObserverEntry[];
+declare function useIntersectionObserver<TElement extends Element>(element: TElement | null | undefined, options?: IntersectionObserverInit): IntersectionObserverEntry[];
 /**
@@ -17,5 +21,10 @@ * Setup an [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) on
  * @param callback A listener for intersection updates.
- * @param init IntersectionObserver options
+ * @param init IntersectionObserver options with a notable change,
+ * unlike a plain IntersectionObserver `root: null` means "not provided YET",
+ * and the hook will wait until it receives a non-null value to set up the observer.
+ * This change allows for easier syncing of element and root values in a React
+ * context.
+ *
  */
-declare function useIntersectionObserver<TElement extends Element>(element: TElement | null | undefined, callback: IntersectionObserverCallback, options: IntersectionObserverInit): void;
+declare function useIntersectionObserver<TElement extends Element>(element: TElement | null | undefined, callback: IntersectionObserverCallback, options?: IntersectionObserverInit): void;
 export default useIntersectionObserver;

esm/useIntersectionObserver.js

@@ -10,3 +10,7 @@ import { useState } from 'react';
  * @param element The DOM element to observe
- * @param init IntersectionObserver options
+ * @param init IntersectionObserver options with a notable change,
+ * unlike a plain IntersectionObserver `root: null` means "not provided YET",
+ * and the hook will wait until it receives a non-null value to set up the observer.
+ * This change allows for easier syncing of element and root values in a React
+ * context.
  */
@@ -34,5 +38,6 @@
 
-  var handler = useEventCallback(callback || setEntry);
+  var handler = useEventCallback(callback || setEntry); // We wait for element to exist before constructing
+
   var observer = useStableMemo(function () {
-    return typeof IntersectionObserver !== 'undefined' && new IntersectionObserver(handler, {
+    return root !== null && typeof IntersectionObserver !== 'undefined' && new IntersectionObserver(handler, {
       threshold: threshold,
@@ -39,0 +44,0 @@ root: root,

package.json

 {
   "name": "@restart/hooks",
-  "version": "0.3.27",
+  "version": "0.4.0",
   "main": "cjs/index.js",
@@ -5,0 +5,0 @@ "types": "cjs/index.d.ts",

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

180202

increased by0.86%

Lines of code

4866

increased by0.45%

No dependency changes