🚀 Por que React DashGrid?

• 📦 Layout Inteligente: Organiza os cards automaticamente para preencher os espaços da melhor forma, sem deixar "buracos".
• ↔️ Leve e Sem Dependências: Construído com React puro, sem bibliotecas externas pesadas.
• 👁️ Totalmente Customizável: Você controla 100% o conteúdo e a aparência dos seus cards.
• ✨ Responsivo: O grid se adapta fluidamente ao tamanho do container.

📦 Instalação

npm install react-dashgrid
# ou
yarn add react-dashgrid

🛠️ Como Usar

A react-dashgrid exporta um componente principal: <Droppable />. Você deve gerenciar o estado dos seus cards e passar para o componente, junto com uma função que renderiza seus cards customizados.

import React, { useState } from 'react';
import { Droppable } from 'react-dashgrid';

// IMPORTANTE: Importe os estilos base da biblioteca para o drag-and-drop funcionar.
import 'react-dashgrid/dist/style.css';

// 1. Defina o seu componente de Card customizado
const MyCard = ({ card, onRemove }) => (
  <div style={{
    width: '100%',
    height: '100%',
    backgroundColor: card.color,
    borderRadius: '8px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    color: 'white',
    fontWeight: 'bold',
    position: 'relative',
    boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
  }}>
    <h3>{card.title}</h3>
    <button
      onClick={() => onRemove(card.id)}
      style={{ position: 'absolute', top: '5px', right: '5px', background: 'none', border: 'none', color: 'white', cursor: 'pointer' }}
    >
      ×
    </button>
  </div>
);

function App() {
  // 2. Gerencie o estado dos seus cards
  const [cards, setCards] = useState([
    { id: '1', title: 'Card 1', size: 'sm', color: '#ef4444' },
    { id: '2', title: 'Card 2', size: 'md', color: '#3b82f6' },
    { id: '3', title: 'Card 3', size: 'lg', color: '#22c55e' },
  ]);

  const removeCard = (id) => {
    setCards(cards.filter(card => card.id !== id));
  };

  return (
    <div style={{ width: '100%', height: '500px', backgroundColor: '#334155', padding: '16px', borderRadius: '8px' }}>
      <Droppable
        cards={cards}
        onCardsChange={setCards}
        renderCard={(card) => <MyCard card={card} onRemove={removeCard} />}
      />
    </div>
  );
}

📚 API

Props do <Droppable />

| Prop | Tipo | Obrigatório | Descrição | |-----------------|------------------------------------------|-------------|-----------| | cards | CardData[] | ✅ Sim | Lista de objetos representando os cards | | onCardsChange | (cards: CardData[]) => void | ✅ Sim | Função chamada quando a ordem ou tamanho dos cards muda | | renderCard | (card: CardData) => React.ReactNode | ✅ Sim | Função que renderiza cada card | | baseUnitWidth | number | ❌ Não | Largura base em px (padrão: 160) | | baseUnitHeight| number | ❌ Não | Altura base em px (padrão: 100) | | gap | number | ❌ Não | Espaçamento entre os cards (padrão: 16) | | sizes | Record<string, {w: number, h: number}> | ❌ Não | Objeto com definições de tamanhos customizados |

Estrutura do Objeto CardData

Cada objeto no array cards deve conter, no mínimo, as seguintes propriedades:

| Chave | Tipo | Obrigatório | Descrição | |---------|----------------------|-------------|------------------------------------------------| | id | string ou number | ✅ Sim | Identificador único e estável para o card. | | size | string | ✅ Sim | Chave de um tamanho definido na prop sizes. |

🖼️ Demonstração Online

👉 Veja a biblioteca em ação aqui! Vercel

🏗️ Contribuições

Contribuições são bem-vindas! Se encontrou um bug ou tem uma sugestão, por favor, abra uma issue.

📄 Licença

Este projeto está sob a licença MIT.