O React se destaca como uma biblioteca JavaScript amplamente reconhecida para a criação de interfaces de usuário (UI). Com o React, é possível desenvolver uma variedade de aplicações web, desde redes sociais e plataformas de e-commerce até blogs, aplicativos de página única, sistemas de gerenciamento de conteúdo (CMS), painéis e visualizações de dados, entre outras opções.
Desenvolvedores têm a flexibilidade de expandir as funcionalidades das aplicações React através do uso de diversas bibliotecas e frameworks. Essas bibliotecas podem ser categorizadas em grupos distintos, sendo as de funcionalidade “arrastar e soltar” uma categoria particularmente popular.
A funcionalidade de arrastar e soltar é uma forma de interação da interface do usuário que permite ao usuário selecionar um elemento na tela, movê-lo e posicioná-lo em outro componente. Um exemplo clássico dessa função é a reorganização de itens em uma lista, onde se pode alterar a ordem dos itens arrastando-os para a posição desejada.
Adicionalmente, a funcionalidade de Arrastar e Soltar pode ser aplicada em diversas situações:
- Upload de arquivos: Usuários podem simplesmente arrastar arquivos para a área de upload, evitando a necessidade de navegar por suas máquinas para selecionar os arquivos.
- Painéis Kanban: É possível criar um painel onde os usuários podem mover itens entre diferentes colunas, refletindo os estágios de um projeto ou atividade.
- Galerias de imagens: Permite aos usuários carregar e reorganizar imagens em uma galeria de maneira intuitiva.
- Widgets: Usuários podem personalizar a aparência de um aplicativo arrastando e soltando widgets na interface.
- Carrinho de compras: Facilita a adição de produtos ao carrinho, permitindo que os usuários arrastem itens para o local apropriado.
Uma biblioteca React para funcionalidade de arrastar e soltar oferece componentes pré-construídos que permitem aos desenvolvedores implementar essa interação em suas aplicações React de forma eficiente.
Estas bibliotecas fornecem componentes reutilizáveis, possibilitando a criação de elementos que podem ser facilmente arrastados e soltos. Elas também cuidam dos diferentes eventos relacionados a essa interação, como o início do arrasto, a entrada e saída de áreas, e o ato de soltar o elemento.
Como as bibliotecas de arrastar e soltar melhoram as interações da interface do usuário
- Experiência do usuário aprimorada: A interação de arrastar e soltar é uma forma intuitiva para os usuários interagirem com aplicativos. A capacidade de simplesmente arrastar itens ao invés de inserir informações manualmente oferece uma experiência mais fluida e interativa.
- Fluxos de trabalho simplificados: A facilidade de arrastar arquivos de diferentes locais para um aplicativo elimina etapas desnecessárias.
- Aumento da produtividade: A funcionalidade de arrastar e soltar economiza tempo, otimizando a experiência do usuário e tornando-os mais produtivos.
- Ideal para dispositivos móveis: Dispositivos como smartphones e tablets, com espaço de tela limitado, beneficiam-se da interação por gestos, fazendo com que o arrastar e soltar seja uma funcionalidade muito valiosa.
- Interfaces mais atraentes: A funcionalidade de arrastar e soltar adiciona um apelo visual à interface do usuário de uma aplicação, com a possibilidade de incluir animações que fornecem feedback e indicam as ações conforme os usuários interagem com o aplicativo.
Abaixo estão listadas algumas das melhores bibliotecas React para implementar a funcionalidade de arrastar e soltar:
React DnD
React DnD é um conjunto de ferramentas React projetadas para a construção de interfaces complexas de arrastar e soltar. É uma escolha ideal para desenvolver aplicativos como o Trello ou Storify, onde a funcionalidade de arrastar e soltar envolve também a transferência de dados.
Instalação:
npm install react-dnd react-dnd-html5-backend
A importação de React DnD em seu componente React pode ser feita da seguinte maneira:
import { useDrag } from 'react-dnd'Principais características:
- Integração com seus componentes: Ao invés de oferecer widgets prontos, essa biblioteca envolve seus componentes e injeta propriedades neles.
- Extensibilidade: Permite adicionar um back-end personalizado baseado em eventos do mouse ou toque.
- Testabilidade: Facilita a criação de testes utilizando Jest ou Enzyme.
- Suporte a toque: Oferece suporte à funcionalidade de toque através do touch backend do React DnD.
React DnD é uma biblioteca de código aberto e gratuita.
React Draggable
React Draggable é uma biblioteca simples e poderosa para React que facilita a criação de elementos que podem ser arrastados.
Instalação:
npm install react-draggable
Para utilizar React Draggable, importe-o em seu componente React como:
import Draggable from 'react-draggable';Características:
- Fácil instalação e configuração: Basta instalar e importar a biblioteca para começar. Também é possível importar componentes individualmente.
- Compatibilidade com JavaScript vanilla e React: Permite o uso de React Draggable com JavaScript puro, da seguinte forma:
let Draggable = require('react-draggable');
let DraggableCore = Draggable.DraggableCore;- Compatibilidade com outras bibliotecas React: Permite a integração com outras bibliotecas, como o React Grid Layout.
React Draggable é uma biblioteca de código aberto e gratuita para implementar funcionalidades de arrastar e soltar em aplicações React.
React Dropzone
React Dropzone é um Hook simples do React para criar áreas de arrastar e soltar que são compatíveis com HTML5 para arquivos.
Instalação:
npm install --save react-dropzone
ou:
yarn add react-dropzone
A importação da biblioteca pode ser feita da seguinte maneira:
import {useDropzone} from 'react-dropzone';Características:
- Flexibilidade de estilo: Esta biblioteca não define estilos, permitindo que você personalize seus componentes como preferir.
- Definição de tipos de arquivo: Permite especificar os tipos de arquivo que a área de upload aceitará, através da propriedade
accept. - Validação personalizada: Possibilita a especificação de regras de validação personalizadas para diferentes arquivos através da propriedade
validator.
React Dropzone é uma biblioteca gratuita e de código aberto para implementação de funcionalidades de arrastar e soltar em aplicações React.
React Grid Layout
React Grid Layout é um layout de grade redimensionável e arrastável para o React.
Instalação:
npm install react-grid-layout
A importação da biblioteca pode ser feita da seguinte maneira:
import GridLayout from "react-grid-layout";Características:
- Independência de dependências: É construída exclusivamente em React, sem depender de JQuery.
- Widgets redimensionáveis: Além de permitir o arrastar e soltar, os componentes também podem ser redimensionados.
- Layouts responsivos: Oferece layouts distintos para diferentes pontos de interrupção.
- Personalização: Permite adicionar ou remover widgets sem ter que reconstruir toda a grade.
React Grid Layout é uma biblioteca de código aberto e gratuita para React.
React rnd
React rnd é um componente redimensionável e arrastável para React.
Instalação:
npm i -S react-rnd
Ou
yarn add react-rnd
Características:
- Simplicidade: É projetada para ser simples, mas muito poderosa.
- Compatibilidade com TypeScript e JavaScript: Pode ser utilizada tanto em aplicações React com JavaScript como TypeScript.
- Suporte a redimensionamento: Facilita o redimensionamento dos componentes criados com React rnd.
React rnd é uma biblioteca de código aberto e gratuita.
React Virtualized dnd
React Virtualized dnd é uma estrutura React para arrastar e soltar que possui barras de rolagem de virtualização integradas.
Instalação:
npm install --save react-virtualized-dnd
A importação da biblioteca pode ser feita da seguinte forma:
import ExampleBoard from 'react-virtualized-dnd';Características:
- Variedade de componentes: Os componentes estão organizados em categorias como “Altura Fixa”, “Altura Variável” e “Agrupáveis”.
- Personalização: Permite personalizar os componentes para que se adaptem às suas necessidades.
React Virtualized dnd é uma estrutura React de código aberto com o código-fonte disponível no GitHub.
React Movable
React Movable é uma biblioteca React para arrastar e soltar elementos em listas e tabelas.
Instalação:
yarn add react-movable
A importação da biblioteca pode ser feita da seguinte forma:
import { List, arrayMove } from 'react-movable';Características:
- Diversas opções de arrastar e soltar: Oferece templates para diferentes tipos de componentes de arrastar e soltar.
- Biblioteca leve: Não possui dependências como JQuery e seu tamanho é inferior a 4kB (com gzip).
- Estilo flexível: Não impõe estilos, dando a você controle sobre a aparência da sua aplicação.
- Suporte a toque: Permite a criação de aplicativos que funcionam em smartphones, tablets e outros dispositivos com telas sensíveis ao toque.
- Escrita em TypeScript: Permite a utilização de Tipos no código, um recurso não disponível em JavaScript puro.
React Movable é uma biblioteca React de código aberto e gratuita.
Draggable
Draggable é uma biblioteca React para arrastar e soltar que permite aos desenvolvedores criar eventos de arrastar e soltar ao abstrair os eventos nativos do navegador em uma API abrangente.
Instalação:
npm install @shopify/draggable --save
ou via yarn:
yarn add @shopify/draggable
Você pode importar Draggable para seu aplicativo React da seguinte forma:
import { Draggable } from '@shopify/draggable';Características:
- Componentes organizados: Facilita a localização do componente certo, já que os componentes são categorizados e personalizáveis.
- Compatibilidade com os principais navegadores: Pode ser utilizada em navegadores como Google Chrome, Mozilla Firefox e Apple Safari.
- Suporte a TypeScript: Possibilita a adição de definições TypeScript em seu código.
- Suporte a plugins: Permite expandir a funcionalidade do Draggable com plugins como Collidable e SwapAnimation.
Draggable é uma biblioteca React de código aberto e gratuita mantida por colaboradores.
React Arrastar para selecionar
React arrastar para selecionar é uma biblioteca React que permite adicionar a funcionalidade de selecionar vários itens arrastando um cursor sobre eles.
Instalação:
npm install --save @air/react-drag-to-select
Ou
yarn add @air/react-drag-to-select
Você pode importar esta biblioteca para seu aplicativo da seguinte maneira:
import { useSelectionContainer } from '@air/react-drag-to-select'Características:
- Simplicidade: Não seleciona itens em si, mas desenha a caixa de seleção e fornece as coordenadas.
- Suporte a TypeScript: A biblioteca é escrita em TypeScript, o que possibilita o uso com aplicações React escritas tanto em JavaScript como TypeScript.
- Suporte a testes: Permite o uso com a maioria das frameworks de testes para React.
React Drag-to-select é uma biblioteca gratuita e de código aberto.
React Dragula
React Dragula é uma biblioteca simples para arrastar e soltar em React.
Instalação:
npm install react-dragula --save
Ou,
bower install react-dragula --save
Características:
- Personalizável: Permite personalizar os componentes para atender às suas necessidades.
- Suporte a toque: Permite criar aplicações que funcionam em smartphones, tablets e outros dispositivos com telas sensíveis ao toque.
- Leve: Possui um tamanho de pacote pequeno, sendo ideal para aplicações React que precisam ter um tamanho reduzido.
React Dragula é uma biblioteca gratuita e de código aberto.
Conclusão
Agora você possui uma gama de bibliotecas para arrastar e soltar para usar em sua próxima aplicação React. A escolha da biblioteca dependerá das funcionalidades desejadas para sua aplicação, suas preferências pessoais e as características específicas de cada projeto.
Para aplicações mais complexas, você pode utilizar várias bibliotecas de arrastar e soltar para atender diferentes necessidades. A maioria destas bibliotecas é compatível com as principais frameworks de testes para React, facilitando a criação de aplicações mais robustas e confiáveis.