🚀 Features

• 📦 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.

📦 Installation

npm install gridnd
# or
yarn add gridnd

🛠️ Usage

import { 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>
  );
}

📚 Documentation

Props of the component:

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 |

Props of the component:

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|

Reorder function:

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;
  }

🖼️ Demonstration

🏗️ Contribution

Contributions are welcome!

📄 License

This project is under the MIT license.