# react-draggable-masonry

> An open source library to provider a draggable masonry layout for your react projects, the layout is implmented by CSS and the lib is lightweight, only dependent on react.

Latest version **1.0.9** (published 2025-09-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-draggable-masonry
pnpm add react-draggable-masonry
yarn add react-draggable-masonry
bun add react-draggable-masonry
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 1.0.9 |
| Published | 2025-09-08 |
| First published | 2023-02-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 29.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Xiaoyang Huang |
| Maintainers | pianistic-wolf |

## Links

- npm: https://www.npmjs.com/package/react-draggable-masonry
- Repository: https://github.com/Xiaoyang-Huang/react-draggable-masonry
- Homepage: https://github.com/Xiaoyang-Huang/react-draggable-masonry#readme
- Issues: https://github.com/Xiaoyang-Huang/react-draggable-masonry/issues
- npm.io page: https://npm.io/package/react-draggable-masonry

## Recent versions

- 1.0.9 (latest) — 2025-09-08
- 1.0.8 — 2025-09-07
- 1.0.7 — 2025-09-07
- 1.0.4 — 2025-06-17
- 1.0.3 — 2025-06-17
- 1.0.2 — 2025-06-17
- 1.0.1 — 2024-10-15
- 0.1.12 — 2024-01-28
- 0.1.11 — 2024-01-01
- 0.1.10 — 2023-06-22
- 0.1.8 — 2023-04-06
- 0.1.6 — 2023-03-06
- 0.1.5 — 2023-02-28
- 0.1.4 — 2023-02-28
- 0.1.3 — 2023-02-28
- … 3 more at https://npm.io/package/react-draggable-masonry/versions

## README

# React-Draggable-Masonry

An open source library to provider a draggable masonry layout for your react projects, the layout is implmented by CSS and the lib is lightweight, only dependent on react.

# Demo

[Check here](https://xiaoyang-huang.github.io/react-draggable-masonry/)

# Install

```shell
npm install --save react-draggable-masonry
```

# Usage

Check the examples in [demo folder](src/demo)

# API

## Wall

|       Prop       |           Type           | Description                                                                                                                       |
| :--------------: | :----------------------: | --------------------------------------------------------------------------------------------------------------------------------- |
|   columnWidth    |     number \| string     | width of a brick                                                                                                                  |
|    rowHeight     |     number \| string     | height of a brick                                                                                                                 |
|       gap        |     number \| string     | space between brick                                                                                                               |
| allowDragInSpace |         boolean          | allow brick to drag into this wall                                                                                                |
|     dragMode     |   "normal" \| "adapt"    | the way to manage the brick size while drag and drop:<br/>normal: keep the source size<br/>adapt: resize to target size           |
|     swapMode     | "internal" \| "external" | the way to manage the bricker order:<br/>internal: swap bricks with DOM operation<br/>external: leave the DOM management to React |
|     children     |        reactNode         | any react component                                                                                                               |

## Concrete

usually you don't need to use this component

|   Prop   |  Type  | Description                      |
| :------: | :----: | -------------------------------- |
|    id    | string | unique id for the brick children |
|  index   | number | bricker order index in wall      |
| children | Brick  | Bricker component                |

## Brick

Inherit all props from HTMLDIVElement and also have following props additional

|    Prop     |   Type    | Description                                                                                                                        |
| :---------: | :-------: | ---------------------------------------------------------------------------------------------------------------------------------- |
|  draggable  |  boolean  | enable/disable drag function on brick                                                                                              |
|    width    |  number   | how many cells in row will filled by this brick                                                                                    |
|   height    |  number   | how many cells in columns will filled by this brick                                                                                |
| allowToSwap |  boolean  | set to false if you want a fixed brick, otherwise if a draggable birck move on this brick, it will swap the position with that one |
|  children   | reactNode | any react component                                                                                                                |

# Mobile Support

Tested with [drag-drop-touch](https://www.npmjs.com/package/drag-drop-touch) and it able to work with mobile devices.
check our [demo code](src/index.tsx#L5), you need install the package and import that to enable the mobile support.

---
_Source: https://npm.io/package/react-draggable-masonry · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._