import { useState } from 'react';
import { useResizeDetector } from 'react-resize-detector';

/**
 * Hook that measures the width of an HTML element and updates when it changes
 */
const useElementWidthDetector = (
  ref: React.MutableRefObject<HTMLElement | null>,
): number | null => {
  const [width, setWidth] = useState<number | null>(null);

  useResizeDetector({
    targetRef: ref,
    handleWidth: true,
    handleHeight: false,
    onResize: () => {
      if (ref.current) {
        setWidth(ref.current.offsetWidth);
      }
    },
  });

  return width;
};

export default useElementWidthDetector;

import ReactGridLayout from "react-grid-layout";
import useElementWidthDetector from "./helpers/useElementWidthDetector"

export default function App() {
  const parentRef = React.useRef<HTMLDivElement>(null);
  const calculatedWidth = useElementWidthDetector(parentRef);

  const widgetsState = [
    { name: "Widget 1", x: 0, y: 0, w: 1, h: 4 },
    { name: "Widget 2", x: 1, y: 0, w: 1, h: 4 },
  ];

  return (
    <div style={{ width: "500px" }} ref={parentRef}>
      {calculatedWidth && (<ReactGridLayout cols={2} rowHeight={120} width={calculatedWidth}>
        {widgetsState.map((widget) => (
          <div
            key={widget.name}
            data-grid={{
              x: widget.x,
              y: widget.y,
              w: widget.w,
              h: widget.h,
            }}
          >
            {widget.name}
          </div>
        ))}
      </ReactGridLayout>)}
    </div>
  );
}