@rescui/use-resize-observer 0.1.2 → 0.1.4

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/use-resize-observer",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "ResizeObserver hook",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -18,13 +18,13 @@
     "core-js": "^3.9.1"
   },
   "peerDependencies": {
-    "react": ">=16.8.0 <18"
+    "react": ">=16.8.0 <19"
   },
   "devDependencies": {
-    "@rescui/scripts": "^0.1.7"
+    "@rescui/scripts": "^0.2.0"
   },
   "scripts": {
     "build": "rescui-scripts build"
   },
-  "gitHead": "5b91fbea7e31d106ca19925f66908b080884a3b5"
+  "gitHead": "3fb96470654a814a47b84a55571b1454c69da15c"
 }