@spaced-out/ui-design-system/lib/hooks/useReferenceElementWidth/useReferenceElementWidth.js.flow

Sense UI components library

// @flow strict
import * as React from 'react';

import {sizeFluid} from '../../styles/variables/_size';


const MIN_FLUID_WIDTH = 160;

export function useReferenceElementWidth(
  ref: ?HTMLElement,
  minWidth: number = MIN_FLUID_WIDTH,
): string {
  const [width, setWidth] = React.useState(sizeFluid);

  const refWidth = ref?.offsetWidth;
  React.useLayoutEffect(() => {
    if (refWidth) {
      setWidth(Math.max(refWidth, minWidth) + 'px');
    }
  }, [refWidth, minWidth]);

  return width;
}