Skip to main content

react-grid-layout

tip
  • ResponsiveGridLayout 在 container 中,当 container resize 的时候不会变化
// 基于环境自动检测 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

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>
);
};