Features | Installation | Usage | Documentation | Demonstration | Contribution | License
- 📦 Customizable widgets: Create a grid with items of variable sizes (
sm,md,lg,xl). ↔️ Drag and drop: Easily reorder cards with drag-and-drop functionality.- 👁️ Hide items: Each card can be hidden or resized.
npm install gridnd
# or
yarn add gridndimport { Droppable, Draggable, reorderItens } from 'gridnd'
import 'gridnd/style.css'
import { useState } from 'react';
import { Card, cards, CardProps } from '@/components/Card';
export default function Home() {
const [widgets, setWidgets] = useState<CardProps[]>(cards);
function handleDropMove(idOrigin: string, idDestiny: string) {
const indexOrigin = widgets.findIndex(item => item.id.toString() === idOrigin);
const indexDestiny = widgets.findIndex(item => item.id.toString() === idDestiny);
const result = reorderItens(widgets, indexOrigin, indexDestiny);
setWidgets(result);
}
return (
<div className="w-screen h-screen bg-slate-900 p-4">
<Droppable style={{ backgroundColor: '#1e293b' }}>
{widgets.map(item =>
<Draggable
key={item.id}
id={item.id.toString()}
size={item.size}
onDragMove={handleDropMove}
isSizingDynamic
onHidden={() => {}}
>
<Card colorStyle={item.colorStyle} title={item.title}/>
</Draggable>
)}
</Droppable>
</div>
);
}This component is the drag area, responsible for organizing the items into a grid.
| Prop | Type | Description |
|---|---|---|
| Children | ReactNode | You need to pass child components inside |
This component makes the objects draggable.
| Prop | Type | Description |
|---|---|---|
| id | String | ID of the component to be dragged. |
| size | 'sm' or 'md' or 'lg' or 'xl' | Size the component will occupy in the grid |
| onDragMove | (idOrigin: string, idDestiny: string) => void | Function responsible for managing the drag-and-drop of items |
| onHidden (optional) | () => void | Function triggered when hiding cards |
| isSizingDynamic (optional) | Boolean | Checks if the card can change its size |
| availableSizes (optional) | ('sm' or 'md' or 'lg' or 'xl')[] | Represents the sizes that cards can have |
| Children | ReactNode | The component you want to place inside the card must be passed here |
This function is a standard function for reordering cards.
export function reorderItens<T>(list: T[], indexOrigin: number, indexDestiny:number){
const result = Array.from(list);
const [removed] = result.splice(indexOrigin, 1);
result.splice(indexDestiny, 0, removed);
return result;
}Contributions are welcome!
This project is under the MIT license.
by Henrique Anjos with ❤️