@rescui/use-resize-observer 0.1.1 → 0.1.3

package/README.md

@@ -1,6 +1,13 @@
 # ResizeObserver hook
 
-## Usage
+This package is used for observing react elements.
+It uses `ResizeObserver` and alleviates some of its bugs.
+
+It's best used together with React refs. It can be used with raw `HTML` elements, although it's better to avoid that.
+
+## Usage examples
+
+### React ref example
 
 ```tsx
 import React, { useRef } from 'react';
@@ -15,3 +22,21 @@ const MyComponent = () => {
   return <div ref={ref}>To the moon!</div>;
 };
 ```
+
+### HTML element example
+
+**Note:** Avoid this option when possible due to additional re-renders when using [callback refs](https://legacy.reactjs.org/docs/refs-and-the-dom.html#callback-refs) and `useState`. Use React ref instead.
+
+```tsx
+import React, { useState } from 'react';
+import { useResizeObserver } from '@rescui/use-resize-observer';
+
+const MyComponent = () => {
+  const [el, setEl] = useState<HTMLElement>(null);
+  useResizeObserver(el, (entry: ResizeObserverEntry) => {
+    // resize logic
+  });
+
+  return <div ref={setEl}>To the moon!</div>;
+};
+```

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

@@ -1,3 +1,3 @@
 import React from 'react';
 export declare type Callback = (entry: ResizeObserverEntry) => void;
-export declare const useResizeObserver: <T extends Element>(target: T | React.MutableRefObject<T>, callback: Callback) => void;
+export declare const useResizeObserver: <T extends Element>(target: T | React.RefObject<T> | null, callback: Callback) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/use-resize-observer",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "ResizeObserver hook",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -21,10 +21,10 @@
     "react": ">=16.8.0 <18"
   },
   "devDependencies": {
-    "@rescui/scripts": "^0.1.7"
+    "@rescui/scripts": "^0.2.0"
   },
   "scripts": {
     "build": "rescui-scripts build"
   },
-  "gitHead": "40e998f9a619c95fe39dc88c3f1ddb824cf7b37a"
+  "gitHead": "c87adfdebe07392a0aa67ce434ce465762d8fa95"
 }