gridnd v1.1.0

🚀 Funcionalidades

• 📦 Widgets personalizáveis: Crie um grid com itens de tamanhos variáveis (sm, md, lg, xl).
• ↔️ Arrastar e soltar: Reordene os cards de forma simples com drag-and-drop.
• 👁️ Ocultar itens: Cada card pode ser ocultado ou redimensionado.

📦 Instalação

npm install gridnd
# ou
yarn add gridnd

🛠️ Uso

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

📚 Documentação

Props do componente :

Esse componente é a area de arraste dos objetos, ela é a responsável por organizar os itens em grid.

Props do componente :

Esse componente é o que torna os objetos arrastáveis.

Função reorder:

Essa função é uma função padrão para reordenação dos 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;
  }

🖼️ Demonstração

🏗️ Contribuição

Contribuições são bem-vindas!

📄 Licença

Este projeto está sob a licença MIT.