react-grid-layout

import React, { useState } from 'react'; import { Responsive, WidthProvider, Layout } from 'react-grid-layout'; import 'react-grid-layout/css/styles.css'; import 'react-resizable/css/styles.css'; // WidthProvider is a HOC that provides the width prop to the Responsive grid. const ResponsiveGridLayout = WidthProvider(Responsive); const MyResponsiveDashboard: React.FC = () => { const [currentLayout, setCurrentLayout] = useState<Layout[]>([ { i: 'a', x: 0, y: 0, w: 1, h: 2 }, { i: 'b', x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4 }, { i: 'c', x: 4, y: 0, w: 1, h: 2 } ]); // Define responsive breakpoints and column counts const breakpoints = { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }; const cols = { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }; const onLayoutChange = (layout: Layout[], layouts: { [key: string]: Layout[] }) => { // Save the current layout state, e.g., to local storage or a backend console.log('Layout changed:', layout); setCurrentLayout(layout); }; return ( <div style={{ padding: '20px' }}> <h1>My Responsive Dashboard</h1> <ResponsiveGridLayout className="layout" layouts={{ lg: currentLayout }} // Provide current layout for the 'lg' breakpoint breakpoints={breakpoints} cols={cols} rowHeight={30} onLayoutChange={onLayoutChange} isDraggable={true} isResizable={true} margin={[10, 10]} containerPadding={[10, 10]} measureBeforeMount={true} // Set to true for initial measurement if not using SSR > <div key="a" style={{ background: '#e0f7fa', border: '1px solid #b2ebf2', padding: '10px' }}>Widget A</div> <div key="b" style={{ background: '#e8f5e9', border: '1px solid #c8e6c9', padding: '10px' }}>Widget B</div> <div key="c" style={{ background: '#fff3e0', border: '1px solid #ffe0b2', padding: '10px' }}>Widget C</div> </ResponsiveGridLayout> </div> ); }; export default MyResponsiveDashboard;