React: Construir experiências interativas de utilizador com React DnD

Introdução

A funcionalidade Drag-and-drop functionality permite aos utilizadores manipular elementos num projeto React. Para começar intuitivamente, vamos configurar um projeto React e integrar o react-dnd no mesmo. Siga os passos abaixo:

Passo nº 1: Criar um novo projecto em React

Abra o seu terminal e execute o seguinte comando:

#node 16
npx create-react-app dnd-project
cd dnd-project

Passo nº 2: Instalar a biblioteca react-dnd e as suas dependências

#[email protected]
#[email protected]
#[email protected]

npm install react-dnd @types/react-dnd react-dnd-html5-backend

Passo nº 3: DraggableItem.js e DropZone.js

Abra o projeto no seu editor de código preferido e navegue até ao diretório src. Vamos criar dois novos componentes:

DraggableItem.js

import React from "react";
import { useDrag } from "react-dnd";

function DraggableItem({ name }) {
  const [{ isDragging }, drag] = useDrag({
    type: "item",
    item: { name },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  });

  return (
    <div ref={drag} style={{ opacity: isDragging ? 0.5 : 1 }}>
      Drag this
    </div>
  );
}

export default DraggableItem;

O componente DraggableItem representa um item que pode ser arrastado. Utilizando o hook useDrag do React-DND, definimos o comportamento de arrastar do item arrastável. A propriedade item especifica o tipo e o ID do item, enquanto a função collect nos permite recolher informações sobre o estado de arrastar.

DropZone.js

import React from 'react';
import { useDrop } from 'react-dnd';

function DropZone({ onDrop }) {
  const [{ isOver }, drop] = useDrop({
    accept: 'item',
    drop: (item, monitor) => {
      onDrop(item);
    },
    collect: (monitor) => ({
      isOver: monitor.isOver(),
    }),
  });

  const backgroundColor = isOver ? 'lightgreen' : 'white';

  return (
    <div
      ref={drop}
      style={{ backgroundColor }}
      className="drop-zone"
    >
      {isOver ? 'Item Dropped!' : 'Drop Here'}
    </div>
  );
};

export default DropZone;

O componente DropZone serve como a área onde os itens arrastáveis podem ser largados. Utiliza o useDrop hook do React-DND para definir o comportamento de soltar na zona de soltar. A propriedade accept especifica o tipo de item aceite, a função drop manipula o item solto e a função collect fornece informação sobre o estado do item solto.

Passo nº 4: DndProvider Setup

Abra o ficheiro App.js no diretório src e substitua o código existente pelo seguinte:

import React, { useState } from "react";
import DraggableItem from "./DraggableItem";
import DropZone from "./DropZone";
import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";

const App = () => {
  const [droppedItem, setDroppedItem] = useState(null);

  const handleDrop = (item) => {
    setDroppedItem(item.name);
  };

  return (
    <DndProvider backend={HTML5Backend}>
      <div className="app">
        <h1>React DnD</h1>
        <div className="container">
          <div className="column">
            <h2>Draggable Items</h2>
            <DraggableItem name="Item 1" />
            <DraggableItem name="Item 2" />
            <DraggableItem name="Item 3" />
          </div>
          <div className="column">
            <h2>Drop Zone</h2>
            <DropZone onDrop={handleDrop} />
          </div>
        </div>
        <div className="result">
          {droppedItem && <p>Dropped item: {droppedItem}</p>}
        </div>
      </div>
    </DndProvider>
  );
};

export default App;

O componente DndProvider é uma parte crucial da biblioteca React-DND, responsável por configurar o contexto de arrastar e largar numa aplicação React. Atua como um componente wrapper que estabelece a infraestrutura necessária para que a funcionalidade de arrastar e largar funcione sem problemas.

Passo nº 5: Estilizar os componentes

Por fim, vamos adicionar alguns estilos básicos aos nossos componentes. Abra o ficheiro App.css no diretório src e substitua o código existente pelo seguinte:

.app { 
text-align: center;
padding: 20px;
}

.container {
display: flex;
justify-content: space-around;
}

.column {
flex: 1;
padding: 10px;
border: 1px solid gray;
}

.draggable-item {
cursor: move;
background-color: lightblue;
padding: 10px;
margin-bottom: 10px;
}

.drop-zone {
height: 150px;
border: 2px dashed gray;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
font-size: 18px;
}

Passo nº 6: Customizar os componentes

Agora, com os conceitos básicos dos componentes de arrastar e largar, pode melhorar a usabilidade com animações, cores e estilos como desejar.

Conclusão

Em resumo, o React-DND tem sido uma ferramenta valiosa na Buzzvel, permitindo-nos incorporar interações de arrastar e largar sem problemas nas nossas aplicações React. Melhorou a experiência do utilizador e tornou as nossas interfaces mais interativas e intuitivas.