react-use-rect - npm Package Compare versions

Comparing version 1.1.3 to 1.1.4

dist/index.js

@@ -8,17 +8,2 @@ 'use strict';
 
-const DEFAULT_RECT = {
-  bottom: 0,
-  height: 0,
-  left: 0,
-  right: 0,
-  top: 0,
-  width: 0,
-  x: 0,
-  y: 0
-};
-const DEFAULT_OPTIONS = {
-  scroll: false,
-  transitionEnd: false
-};
-
 const RECT_KEYS = [
@@ -69,18 +54,30 @@ "bottom",
   window.addEventListener(eventType, listener, LISTENER_CONFIG);
-  return () => window.removeEventListener(eventType, listener, LISTENER_CONFIG);
+  function removeListener() {
+    window.removeEventListener(eventType, listener, LISTENER_CONFIG);
+  }
+  return removeListener;
 }
 
 function doesEventTargetContainElement(target, element) {
-  return target === window || target instanceof Node && target.contains(element);
+  return target === window && element.isConnected || target instanceof Node && target.contains(element);
 }
 
+const INITIAL_RECT = {
+  bottom: 0,
+  height: 0,
+  left: 0,
+  right: 0,
+  top: 0,
+  width: 0,
+  x: 0,
+  y: 0
+};
 function useRect(options = {}) {
-  var _a, _b;
-  const scroll = (_a = options.scroll) != null ? _a : DEFAULT_OPTIONS.scroll;
-  const transitionEnd = (_b = options.transitionEnd) != null ? _b : DEFAULT_OPTIONS.transitionEnd;
+  const scroll = Boolean(options.scroll);
+  const transitionEnd = Boolean(options.transitionEnd);
   const [element, setElement] = react.useState(null);
-  const [rect, setRect] = react.useState(DEFAULT_RECT);
+  const [rect, setRect] = react.useState(INITIAL_RECT);
   const updateRect = react.useCallback(() => {
     setRect((currentRect) => {
-      const nextRect = element ? getElementRect(element) : DEFAULT_RECT;
+      const nextRect = element ? getElementRect(element) : INITIAL_RECT;
       return areRectsNotEqual(currentRect, nextRect) ? nextRect : currentRect;
@@ -127,3 +124,4 @@ });
 
+exports.INITIAL_RECT = INITIAL_RECT;
 exports.useRect = useRect;
 //# sourceMappingURL=index.js.map

dist/react-use-rect.esm.js

 import { useEffect, useLayoutEffect, useState, useCallback } from 'react';
 import { ResizeObserver } from '@juggle/resize-observer';
 
-const DEFAULT_RECT = {
-  bottom: 0,
-  height: 0,
-  left: 0,
-  right: 0,
-  top: 0,
-  width: 0,
-  x: 0,
-  y: 0
-};
-const DEFAULT_OPTIONS = {
-  scroll: false,
-  transitionEnd: false
-};
-
 const RECT_KEYS = [
@@ -64,18 +49,30 @@ "bottom",
   window.addEventListener(eventType, listener, LISTENER_CONFIG);
-  return () => window.removeEventListener(eventType, listener, LISTENER_CONFIG);
+  function removeListener() {
+    window.removeEventListener(eventType, listener, LISTENER_CONFIG);
+  }
+  return removeListener;
 }
 
 function doesEventTargetContainElement(target, element) {
-  return target === window || target instanceof Node && target.contains(element);
+  return target === window && element.isConnected || target instanceof Node && target.contains(element);
 }
 
+const INITIAL_RECT = {
+  bottom: 0,
+  height: 0,
+  left: 0,
+  right: 0,
+  top: 0,
+  width: 0,
+  x: 0,
+  y: 0
+};
 function useRect(options = {}) {
-  var _a, _b;
-  const scroll = (_a = options.scroll) != null ? _a : DEFAULT_OPTIONS.scroll;
-  const transitionEnd = (_b = options.transitionEnd) != null ? _b : DEFAULT_OPTIONS.transitionEnd;
+  const scroll = Boolean(options.scroll);
+  const transitionEnd = Boolean(options.transitionEnd);
   const [element, setElement] = useState(null);
-  const [rect, setRect] = useState(DEFAULT_RECT);
+  const [rect, setRect] = useState(INITIAL_RECT);
   const updateRect = useCallback(() => {
     setRect((currentRect) => {
-      const nextRect = element ? getElementRect(element) : DEFAULT_RECT;
+      const nextRect = element ? getElementRect(element) : INITIAL_RECT;
       return areRectsNotEqual(currentRect, nextRect) ? nextRect : currentRect;
@@ -122,3 +119,3 @@ });
 
-export { useRect };
+export { INITIAL_RECT, useRect };
 //# sourceMappingURL=react-use-rect.esm.js.map

dist/useRect.d.ts

@@ -1,2 +0,3 @@
-import { Options, Result } from './types';
+import { Rect, Options, Result } from './types';
+export declare const INITIAL_RECT: Rect;
 export declare function useRect(options?: Options): Result;

package.json

 {
   "name": "react-use-rect",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "Hook that measures element boundaries",
@@ -5,0 +5,0 @@ "license": "MIT",

src/useRect.ts

 import { useCallback, useEffect, useState } from 'react';
 import { ResizeObserver } from '@juggle/resize-observer';
-import { DEFAULT_OPTIONS, DEFAULT_RECT } from './defaults';
-import { Options, Result } from './types';
+import { Rect, Options, Result } from './types';
 import {
@@ -13,12 +12,23 @@ areRectsNotEqual,
 
+export const INITIAL_RECT: Rect = {
+  bottom: 0,
+  height: 0,
+  left: 0,
+  right: 0,
+  top: 0,
+  width: 0,
+  x: 0,
+  y: 0
+};
+
 export function useRect(options: Options = {}): Result {
-  const scroll = options.scroll ?? DEFAULT_OPTIONS.scroll;
-  const transitionEnd = options.transitionEnd ?? DEFAULT_OPTIONS.transitionEnd;
+  const scroll = Boolean(options.scroll);
+  const transitionEnd = Boolean(options.transitionEnd);
 
   const [element, setElement] = useState<Element | null>(null);
-  const [rect, setRect] = useState(DEFAULT_RECT);
+  const [rect, setRect] = useState(INITIAL_RECT);
 
   const updateRect = useCallback(() => {
     setRect((currentRect) => {
-      const nextRect = element ? getElementRect(element) : DEFAULT_RECT;
+      const nextRect = element ? getElementRect(element) : INITIAL_RECT;
       return areRectsNotEqual(currentRect, nextRect) ? nextRect : currentRect;
@@ -57,3 +67,6 @@ });
     return listenToWindow('transitionend', ({ target }) => {
-      if (target === element || doesEventTargetContainElement(target, element)) {
+      if (
+        target === element ||
+        doesEventTargetContainElement(target, element)
+      ) {
         updateRect();
@@ -60,0 +73,0 @@ }

src/utils/doesEventTargetContainElement.ts

@@ -6,4 +6,5 @@ export function doesEventTargetContainElement(
   return (
-    target === window || (target instanceof Node && target.contains(element))
+    (target === window && element.isConnected) ||
+    (target instanceof Node && target.contains(element))
   );
 }

src/utils/listenToWindow.ts

@@ -12,3 +12,7 @@ const LISTENER_CONFIG = {
 
-  return () => window.removeEventListener(eventType, listener, LISTENER_CONFIG);
+  function removeListener() {
+    window.removeEventListener(eventType, listener, LISTENER_CONFIG);
+  }
+
+  return removeListener;
 }

No alert changes

Worsened metrics

Total package byte prevSize

26729

-2.78%

Number of package files

25

-7.41%

Lines of code

420

-0.94%

No dependency changes