Merge pull request #258 from siberiacancode/#257

#257 Add use element size hook and demo

Author: debabin

src/hooks/useElementSize/useElementSize.demo.tsx

@@ -0,0 +1,32 @@
+import type { CSSProperties } from 'react';
+
+import { useRef } from 'react';
+
+import { useElementSize } from './useElementSize';
+
+const Demo = () => {
+  const element = useRef<HTMLTextAreaElement>(null);
+
+  const { height, width } = useElementSize(element);
+
+  const containerStyle: CSSProperties = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '15px'
+  };
+
+  const textareaStyle: CSSProperties = {
+    resize: 'both',
+    width: '200px',
+    height: '200px'
+  };
+
+  return (
+    <div style={containerStyle}>
+      <span>Resize the box to see changes</span>
+      <textarea ref={element} style={textareaStyle} value={`width: ${width}\nheight: ${height}`} />
+    </div>
+  );
+};
+
+export default Demo;

src/hooks/useElementSize/useElementSize.ts

@@ -0,0 +1,51 @@
+import type { RefObject } from 'react';
+
+import { useEffect, useState } from 'react';
+
+interface ElementSize {
+  height: number;
+  width: number;
+}
+
+type UseElementSizeTarget = RefObject<Element>;
+
+type UseElementSizeReturn = ElementSize;
+
+/**
+ * @name useElementSize
+ * @description - Hook that returns the width and height of the element
+ * @category Elements
+ *
+ * @param {UseElementSizeTarget} target The target element to observe
+ * @param {ElementSize} [initialSize] The initial size of the element
+ * @returns {UseElementSizeReturn} An object containing the width and height of the element
+ *
+ * @example
+ * const { width, height } = useElementSize(elementRef);
+ */
+export const useElementSize = (
+  target: UseElementSizeTarget,
+  initialSize: ElementSize = { height: 0, width: 0 }
+): UseElementSizeReturn => {
+  const [width, setWidth] = useState(initialSize.width);
+  const [height, setHeight] = useState(initialSize.height);
+
+  useEffect(() => {
+    const observer = new ResizeObserver(([entry]) => {
+      const { inlineSize: width, blockSize: height } = entry.borderBoxSize[0];
+
+      setWidth(width);
+      setHeight(height);
+    });
+
+    if (target.current) {
+      observer.observe(target.current);
+    }
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [target]);
+
+  return { width, height };
+};