🗑️ deprecate useElementSize

.changeset/stale-items-hunt.md

@@ -0,0 +1,5 @@
+---
+"usehooks-ts": minor
+---
+
+Depreciated useElementSize replaced by useResizeObserver

packages/usehooks-ts/src/useElementSize/useElementSize.md

@@ -1,4 +1 @@
-This hook helps you to dynamically recover the width and the height of an HTML element.
-Dimensions are updated on load, on mount/un-mount, when resizing the window and when the ref changes.
-
-**Note**: If you use this hook in an SSR context, set the `initializeWithValue` option to `{ width: undefined, height: undefined }` (You can pass it default values when initializing the hook, see example below).
+This hook has been **deprecated**, use [`useResizeObserver()`](/react-hook/use-resize-observer) instead.

packages/usehooks-ts/src/useElementSize/useElementSize.ts

@@ -17,6 +17,7 @@ type UseElementSizeResult = [(node: Element | null) => void, Size] &
   (Size & { ref: (node: Element | null) => void })
 
 /**
+ * @deprecated - Use `useResizeObserver` instead.
  * A hook for tracking the size of a DOM element.
  * @template T - The type of the DOM element. Defaults to `HTMLDivElement`.
  * @param {?UseElementSizeOptions} [options] - The options for customizing the behavior of the hook (optional).

packages/usehooks-ts/src/useResizeObserver/useResizeObserver.demo.tsx

@@ -37,7 +37,16 @@ export function WithDebounce() {
   })
 
   return (
-    <div ref={ref} style={{ border: '1px solid palevioletred', width: '100%' }}>
+    <div
+      ref={ref}
+      style={{
+        border: '1px solid palevioletred',
+        width: '100%',
+        resize: 'both',
+        overflow: 'auto',
+        maxWidth: '100%',
+      }}
+    >
       debounced: {width} x {height}
     </div>
   )

scripts/updateTestingIssue.mjs

@@ -10,6 +10,7 @@ const hookDir = path.resolve('./packages/usehooks-ts/src')
 const excludeHooks = [
   'useSsr', // @deprecated
   'useImageOnLoad', // @deprecated
+  'useElementSize', // @deprecated
   'useIsomorphicLayoutEffect', // Combination of useLayoutEffect and useEffect without custom logic
 ]