@rescui/use-resize-observer 0.1.6 → 0.2.0

package/README.md

@@ -40,3 +40,27 @@ const MyComponent = () => {
   return <div ref={setEl}>To the moon!</div>;
 };
 ```
+
+### Ignore first call
+
+Sometimes you need to observe only changes and ignore the first observer call.
+
+In that case, you may use the `ignoreFirstCall` option:
+
+```tsx
+import React, { useState } from 'react';
+import { useResizeObserver } from '@rescui/use-resize-observer';
+
+const MyComponent = () => {
+  const ref = useRef<HTMLElement>(null);
+  useResizeObserver(
+    ref,
+    (entry: ResizeObserverEntry) => {
+      // resize logic
+    },
+    { ignoreFirstCall: true }
+  );
+
+  return <div ref={ref}>To the moon!</div>;
+};
+```

package/lib/index.d.ts

@@ -1,2 +1,2 @@
 export { useResizeObserver } from './use-resize-observer';
-export type { Callback } from './use-resize-observer';
+export type { UseResizeObserverCallback as Callback, UseResizeObserverCallback, UseResizeObserverOptions } from './use-resize-observer';

package/lib/use-resize-observer.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
-export declare type Callback = (entry: ResizeObserverEntry) => void;
-export declare const useResizeObserver: <T extends Element>(target: T | React.RefObject<T> | null, callback: Callback) => void;
+export declare type UseResizeObserverCallback = (entry: ResizeObserverEntry) => void;
+export declare type UseResizeObserverOptions = {
+    ignoreFirstCall?: boolean;
+};
+export declare const useResizeObserver: <T extends Element>(target: T | React.RefObject<T> | null, callback: UseResizeObserverCallback, options?: UseResizeObserverOptions) => void;

package/lib/use-resize-observer.js

@@ -1,8 +1,12 @@
 import { useRef, useEffect } from 'react';
 
 var useResizeObserver = function useResizeObserver(target, callback) {
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
+    ignoreFirstCall: false
+  };
   var cb = useRef();
   cb.current = callback;
+  var ignoreFirstCall = options.ignoreFirstCall;
   useEffect(function () {
     if (!target) {
       return;
@@ -21,15 +25,19 @@ var useResizeObserver = function useResizeObserver(target, callback) {
     }
 
     var firstCall = true;
-    var abort = false;
+    var abort = false; // eslint-disable-next-line complexity
 
     var onResize = function onResize(entries) {
       // on the first call, delay it by a frame, see https://stackoverflow.com/a/58701523
       if (firstCall) {
         firstCall = false;
-        window.requestAnimationFrame(function () {
-          onResize(entries);
-        });
+
+        if (!ignoreFirstCall) {
+          window.requestAnimationFrame(function () {
+            onResize(entries);
+          });
+        }
+
         return;
       }
 
@@ -49,7 +57,7 @@ var useResizeObserver = function useResizeObserver(target, callback) {
       abort = true;
       resizeObserver.disconnect();
     };
-  }, [target]);
+  }, [target, ignoreFirstCall]);
 };
 
 export { useResizeObserver };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/use-resize-observer",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "description": "ResizeObserver hook",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -21,10 +21,10 @@
     "react": ">=16.8.0 <19"
   },
   "devDependencies": {
-    "@rescui/scripts": "^0.2.2"
+    "@rescui/scripts": "^0.3.0"
   },
   "scripts": {
     "build": "rescui-scripts build"
   },
-  "gitHead": "b8c3183110f4c518e1718ec7c9bdfaa2d4c7ff36"
+  "gitHead": "51da8a7188f4c558c563065a4ff4ef5c8e74994c"
 }