Function useOffsetWidth

Custom React hook that retrieves the offset width of a referenced element.

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

Example

const MyComponent = () => {
  const ref = useRef<HTMLDivElement>(null);
  const offsetWidth = useOffsetWidth(ref);

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