react-grid-layout

ResponsiveGridLayout 在 container 中，当 container resize 的时候不会变化
- WidthProvide 默认只监听了 window resize

TSX

// 基于环境自动检测 width
const ResponsiveGridLayout = WidthProvider(Responsive);

const Demo = () => {
  return (
    <ResponsiveGridLayout
      layouts={{}}
      breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
      cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
    >
      <div key="1">1</div>
      <div key="2">2</div>
      <div key="3">3</div>
    </ResponsiveGridLayout>
  );
};

Notes

resize handle 会作为 children 传入子元素
- 因此 children 会变为数组
自定义元素需要注意处理好透传 props

FAQ

Resize based on container

TypeScript

import useResizeObserver from 'use-resize-observer';
import { Responsive, ResponsiveProps } from 'react-grid-layout';
const ResponsiveGridLayout: React.FC<ResponsiveProps> = (props) => {
  const { ref, width } = useResizeObserver();
  const realWidth = useDebounce(width, 200);
  // measureBeforeMount
  const w = realWidth ?? width;
  return (
    <div className={classNames('h-full w-full')} ref={ref}>
      {w && <Responsive width={w} {...props} />}
    </div>
  );
};

Notes

FAQ

Resize based on container

关联信息

参考资料