React-Grid-Layout
A React component library for draggable, resizable grid layouts with responsive breakpoints.
- Stars
- 22.5k
- Forks
- 2.7k
- Licence
- MIT
- Language
- TypeScript
- Last update
- 4 days ago
- Type
- Library
What it is
React-Grid-Layout is a grid layout system for React, similar in purpose to Packery or Gridster, that lets users drag and resize items within a grid. It is responsive and supports breakpoints, where layouts can be supplied by the developer or generated automatically. It is React-only and does not require jQuery.
- Building a customizable dashboard where users rearrange widgets
- Creating a responsive layout that changes arrangement across breakpoints
- Saving a user's layout to localStorage and restoring it later, as shown in the demos
- Adding or removing grid items dynamically
- Building a toolbox where items are dragged in from outside the grid
Great for
- React developers building dashboards with movable panels
- Teams migrating from v1 who can use the legacy wrapper for a smoother transition
- Projects that need responsive layouts with different arrangements at different screen widths
- Developers who want TypeScript types included with the library
Not ideal for
- Non-React projects, since the library is React-only
- Developers who need a simple static grid and not drag or resize behavior, where plain CSS grid is likely sufficient
- Teams that cannot update to a v2 API with a required width prop without reworking existing code
How to get it
- 1
Install with a package manager
You'll need: Node.js and a npm-compatible package manager · React
Install from npm
npm install react-grid-layout - 2
Run it
- Install the package with npm.
- Import the component and hooks from 'react-grid-layout' in a React component.
- Use useContainerWidth to measure the container width and pass it as the width prop.
- Provide a layout array and render your grid items as children, then check the demos for examples.
- 3
Get the most out of it
- Use the legacy wrapper from 'react-grid-layout/legacy' if you are migrating from v1 and need runtime compatibility.
- Use the dragConfig handle option to limit dragging to a specific element.
- Use the compactor option to choose vertical, horizontal, or custom compaction algorithms.
- Use measureBeforeMount: true if you are rendering with SSR, as recommended in the README.
- Review the Demos list, such as Bounded Layout and Toolbox, for patterns to copy.
Downloads
Strengths
- Supports responsive breakpoints, with layouts provided by the user or autogenerated
- Written in TypeScript with its own types in v2, and no jQuery dependency
- Includes many demos covering common patterns such as static items, bounded layouts, and min/max sizes
Trade-offs
- v2 has breaking changes, including a required width prop and a removed UMD bundle, so upgrading takes effort
- Requires a bundler such as Vite, webpack, or esbuild since the UMD build was removed
- Drag start now fires after 3px of movement rather than on mousedown, which may change existing behavior
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| react-grid-layout (this) | 22.5k | Library | intermediate | 4 days ago | React developers building dashboards with movable panels |
| muuri | 10.9k | Library | intermediate | 2.5 years ago | Front-end developers building card or photo grids that need drag and drop or filtering |
| react-sortable-hoc | 10.9k | Library | intermediate | 3.2 years ago | Existing React projects that already use react-sortable-hoc and need security fixes only |
| draggable | 18.5k | Library | intermediate | 11 months ago | Front-end developers who want full control over how drag and drop feels and behaves |
| dnd-kit | 17.8k | Library | intermediate | 6 days ago | Developers building sortable lists or grids in a React, Vue, Svelte, or Solid app |
| puck | 13.6k | Library | intermediate | 8 days ago | React developers adding a page builder to an existing app |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.