react-grid-layoutreact-grid-layout is a React component library that allows you to create draggable and resizable grid layouts. It's highly flexible and provides capabilities for building interactive dashboards, configurable UI panels, and other applications where users need to arrange and size elements dynamically.\n\nKey Features:\n\n1. Draggable and Resizable Items: Users can freely drag grid items to new positions and resize them to adjust their width and height within the grid.\n2. Static Items: You can designate specific items as 'static', preventing them from being moved or resized by the user.\n3. Responsive Layouts: With the `<ResponsiveGridLayout>` component, you can define different layouts for various breakpoints (e.g., desktop, tablet, mobile), allowing your grid to adapt gracefully to different screen sizes.\n4. Collision Detection and Compacting: When items are moved or resized, the library automatically handles collisions, compacting the layout to fill empty spaces and ensure items don't overlap (unless specified).\n5. Customizable Grid: You can specify the number of columns (`cols`), the height of rows (`rowHeight`), and the margin between items.\n6. Layout Persistence: The `onLayoutChange` prop provides the current layout state whenever an item is moved or resized, enabling you to save and restore user-defined layouts.\n\nHow it Works:\n\nAt its core, `react-grid-layout` takes an array of layout objects, where each object describes an item's position and dimensions on the grid. Each layout object typically includes properties like:\n\n* `i`: A unique string identifier for the grid item.\n* `x`: The x-coordinate (column index) of the item's top-left corner.\n* `y`: The y-coordinate (row index) of the item's top-left corner.\n* `w`: The width of the item in grid columns.\n* `h`: The height of the item in grid rows.\n* `minW`, `maxW`, `minH`, `maxH`: Optional minimum and maximum width/height constraints for an individual item.\n* `static`: A boolean indicating if the item is static (cannot be moved or resized).\n* `isDraggable`, `isResizable`: Booleans to override global draggable/resizable settings for a specific item.\n\nYou render your actual React components inside the `<GridLayout>` or `<ResponsiveGridLayout>` component, associating each with its corresponding layout `i` prop. The library then handles the rendering, positioning, and interaction logic.\n\n`react-grid-layout` is an excellent choice for applications requiring a highly customizable and interactive grid-based user interface.
Example Code
import React, { useState } from 'react';\nimport { GridLayout } from 'react-grid-layout';\nimport '/node_modules/react-grid-layout/css/styles.css';\nimport '/node_modules/react-resizable/css/styles.css';\n\nconst MyDashboard = () => {\n // Initial layout for 4 grid items\n const [layout, setLayout] = useState([\n { i: 'a', x: 0, y: 0, w: 2, h: 2 },\n { i: 'b', x: 2, y: 0, w: 2, h: 2, minW: 2, maxW: 4, isResizable: true }, // Item b is resizable with constraints\n { i: 'c', x: 4, y: 0, w: 2, h: 2, isDraggable: false }, // Item c is not draggable\n { i: 'd', x: 0, y: 2, w: 6, h: 1, static: true }, // Item d is static (not draggable/resizable by user)\n ]);\n\n const onLayoutChange = (newLayout) => {\n // This callback is fired when the layout changes (e.g., an item is moved or resized)\n console.log('Layout changed:', newLayout);\n setLayout(newLayout);\n };\n\n return (\n <div>\n <h1>My Interactive Dashboard</h1>\n <GridLayout\n className="layout"\n layout={layout}\n cols={12} // Total number of columns in the grid\n rowHeight={100} // Height of each row in pixels\n width={1200} // Width of the grid container in pixels (or '100%' for responsive to parent)\n onLayoutChange={onLayoutChange}\n isDraggable={true} // Allow all items to be draggable by default (can be overridden per item)\n isResizable={true} // Allow all items to be resizable by default (can be overridden per item)\n compactType="vertical" // Compact items vertically when space is available\n preventCollision={false} // Allow items to temporarily overlap during drag (they will snap into place)\n margin={[10, 10]} // [horizontal, vertical] margin between items\n >\n {/* Each child of GridLayout should have a unique 'key' prop corresponding to its 'i' in the layout */}\n {layout.map((item) => (\n <div\n key={item.i}\n style={{\n background: '#007bff',\n color: 'white',\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n border: '1px solid #0056b3',\n borderRadius: '5px',\n fontSize: '1.2em',\n cursor: item.static || item.isDraggable === false ? 'default' : 'grab',\n padding: '5px'\n }}\n >\n Item {item.i.toUpperCase()}\n <br />\n ({item.w}x{item.h})\n {item.static && <span style={{ fontSize: '0.8em', marginTop: '5px' }}>(Static)</span>}\n {item.isDraggable === false && <span style={{ fontSize: '0.8em', marginTop: '5px' }}>(Not Draggable)</span>}\n </div>\n ))}\n </GridLayout>\n <div style={{ marginTop: '30px' }}>\n <h2>Current Layout State:</h2>\n <pre style={{ background: '#f0f0f0', padding: '15px', borderRadius: '5px', overflowX: 'auto' }}>\n {JSON.stringify(layout, null, 2)}\n </pre>\n </div>\n </div>\n );\n};\n\nexport default MyDashboard;\n\n/*\nTo run this example:\n\n1. Create a new React project (e.g., using Create React App or Vite):\n `npx create-react-app my-grid-app` (or `npm create vite@latest my-grid-app -- --template react`)\n `cd my-grid-app`\n\n2. Install react-grid-layout and react-resizable (react-grid-layout depends on react-resizable):\n `npm install react-grid-layout react-resizable`\n\n3. Replace the content of `src/App.js` (or `src/MyDashboard.js` and import it into `App.js`) with the code above.\n\n4. Run your application:\n `npm start` (or `npm run dev`)\n\nThis will display a grid with four items. You can drag and resize 'Item A' and 'Item B'. 'Item B' has min/max width constraints. 'Item C' is not draggable, and 'Item D' is completely static (cannot be moved or resized). The layout JSON will update below the grid as you interact with the items.\n*/