react-draggable-masonry v0.1.12
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
Install
npm install --save react-draggable-masonry
Usage
import { ContainerWrapper, DragButton, ItemWrapper } from "react-draggable-masonry";
const size = 100;
const tilesTotal = 100;
export default function App() {
return (
<ContainerWrapper gap={10} columnWidth={size} rowHeight={size}>
{new Array(tilesTotal).fill("test").map((item, i) =>
i % 2 === 0 ? (
<ItemWrapper key={i} tileId={i}>
<DragButton>Drag</DragButton> {/* put a drag button to enable drag function */}
{i}
</ItemWrapper>
) : (
<div key={i}>{i}</div> /* fixed items, these item will not able to interact with your mouse. */
)
)}
</ContainerWrapper>
);
}
you may need style to make masonry visiable, check the App.tsx in github
API
ContainerWrapper
Inherit all props from HTMLDIVElement and also have following props additional: | Prop | Type | Description |:----: |:----: |------------ |gap |number | the gap between grid tiles |columnWidth |number | grid tile's width |rowHeight |number | grid tile's height |onOrderChange|function | event handler for tile's order change: (order: Array<number | string>) => void
it can be add a ref props and the ref give you access for original tiles and boxes:
{
switchOrder: (origin: TileId, target: TileId) => void;
setOrder: (order: Array<TileId>) => void;
tiles: { [key: string]: Tile };
boxes: { [key: string]: HTMLDivElement };
}
ItemWrapper
It provide default style and function for tile to make it adapt for flex grid (but a tile also can be put into container with out ItemWrapper, it will treat as a fixed item) | Prop | Type | Description |:----: |:----: |------------ |tileId |number or string | mandatory field |colSpan |number | occupied columns for tile |rowSpan |number | occupied rows for tile
DragButton
Provide drag & drop function to a wrapped tile