Function useOffsetSize

Custom React hook that retrieves the offset size (width and height) of a referenced element.

This hook listens for resize events on the specified element and updates the offsetWidth and offsetHeight states whenever the size of the element changes. The offset size includes padding, scrollbars, and borders, but excludes margins.

Example

const MyComponent = () => {
  const ref = useRef<HTMLDivElement>(null);
  const { offsetWidth, offsetHeight } = useOffsetSize(ref);

  return (
    <div ref={ref}>
      <p>Offset Width: {offsetWidth}px</p>
      <p>Offset Height: {offsetHeight}px</p>
    </div>
  );
};