@itwin/itwinui-react/esm/utils/hooks/useContainerWidth.js

A react component library for iTwinUI

import * as React from 'react';
import { useMergedRefs } from './useMergedRefs.js';
import { useResizeObserver } from './useResizeObserver.js';
export const useContainerWidth = (watchResizes = true) => {
  let [contentWidth, setContentWidth] = React.useState(0);
  let ref = React.useCallback((element) => {
    if (!element) return;
    setContentWidth(element.getBoundingClientRect().width);
  }, []);
  let updateWidth = React.useCallback(
    ({ width }) => setContentWidth(width),
    [],
  );
  let [resizeRef, resizeObserver] = useResizeObserver(updateWidth);
  if (!watchResizes) resizeObserver?.disconnect();
  let refs = useMergedRefs(ref, watchResizes ? resizeRef : void 0);
  return [refs, contentWidth];
};