{"library":"react-grid-layout","title":"React Grid Layout (RGL)","description":"React-Grid-Layout (RGL) is a powerful and flexible grid layout system for React applications, enabling draggable and resizable components with responsive breakpoint support. Unlike older solutions like Packery or Gridster, RGL is built purely with React, avoiding external dependencies such as jQuery. The current stable version is 2.2.3, with frequent patch releases addressing bugs and minor enhancements. Version 2.0.0 marked a significant rewrite, introducing a full TypeScript codebase and a modernized Hooks-based API for improved composability and performance. Key differentiators include its robust responsive behavior, native React implementation, and first-class TypeScript support since version 2, making it suitable for complex, enterprise-grade dashboards and user interfaces. Releases occur frequently for bug fixes and minor features, typically multiple times per month for patch versions.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-grid-layout"],"cli":null},"imports":["import { Responsive, WidthProvider } from 'react-grid-layout';","import { Layout } from 'react-grid-layout';","import { useResponsiveLayout } from 'react-grid-layout/hooks';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } from 'react';\nimport { Responsive, WidthProvider, Layout } from 'react-grid-layout';\nimport 'react-grid-layout/css/styles.css';\nimport 'react-resizable/css/styles.css';\n\n// WidthProvider is a HOC that provides the width prop to the Responsive grid.\nconst ResponsiveGridLayout = WidthProvider(Responsive);\n\nconst MyResponsiveDashboard: React.FC = () => {\n  const [currentLayout, setCurrentLayout] = useState<Layout[]>([\n    { i: 'a', x: 0, y: 0, w: 1, h: 2 },\n    { i: 'b', x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4 },\n    { i: 'c', x: 4, y: 0, w: 1, h: 2 }\n  ]);\n\n  // Define responsive breakpoints and column counts\n  const breakpoints = { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 };\n  const cols = { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 };\n\n  const onLayoutChange = (layout: Layout[], layouts: { [key: string]: Layout[] }) => {\n    // Save the current layout state, e.g., to local storage or a backend\n    console.log('Layout changed:', layout);\n    setCurrentLayout(layout);\n  };\n\n  return (\n    <div style={{ padding: '20px' }}>\n      <h1>My Responsive Dashboard</h1>\n      <ResponsiveGridLayout\n        className=\"layout\"\n        layouts={{ lg: currentLayout }} // Provide current layout for the 'lg' breakpoint\n        breakpoints={breakpoints}\n        cols={cols}\n        rowHeight={30}\n        onLayoutChange={onLayoutChange}\n        isDraggable={true}\n        isResizable={true}\n        margin={[10, 10]}\n        containerPadding={[10, 10]}\n        measureBeforeMount={true} // Set to true for initial measurement if not using SSR\n      >\n        <div key=\"a\" style={{ background: '#e0f7fa', border: '1px solid #b2ebf2', padding: '10px' }}>Widget A</div>\n        <div key=\"b\" style={{ background: '#e8f5e9', border: '1px solid #c8e6c9', padding: '10px' }}>Widget B</div>\n        <div key=\"c\" style={{ background: '#fff3e0', border: '1px solid #ffe0b2', padding: '10px' }}>Widget C</div>\n      </ResponsiveGridLayout>\n    </div>\n  );\n};\n\nexport default MyResponsiveDashboard;\n","lang":"typescript","description":"This example demonstrates a basic responsive, draggable, and resizable grid layout using the `Responsive` component with `WidthProvider` and local state management for layout changes. It includes custom breakpoints and grid items.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}