React é uma famosa biblioteca JavaScript de interface de usuário (UI). Você pode usar a biblioteca React para criar diferentes tipos de aplicativos da web, desde aplicativos de mídia social, plataformas de comércio eletrônico, blogs, aplicativos de página única, sistemas de gerenciamento de conteúdo (CMS), painéis e visualizações de dados, para mencionar alguns.
Os desenvolvedores podem estender a funcionalidade dos aplicativos React usando várias bibliotecas e estruturas. Essas bibliotecas podem ser agrupadas em diferentes classes; Arrastar e soltar é uma categoria de biblioteca bastante popular.
A funcionalidade de arrastar e soltar é uma interação da interface do usuário que permite ao usuário clicar/escolher um elemento na tela, arrastá-lo e soltá-lo em outro componente. Um exemplo perfeito dessa funcionalidade é reorganizar itens em uma lista arrastando e soltando itens no local desejado.
Você também pode usar a funcionalidade Arrastar e Soltar nos seguintes casos;
- Carregamento de arquivo: os usuários podem arrastar e soltar arquivos em vez de rolar por suas máquinas para selecionar e carregar arquivos.
- Painéis Kanban: você pode criar um painel onde os usuários podem arrastar e soltar itens dependendo dos níveis ou estágios da atividade.
- Galerias de imagens: você pode ter uma galeria de imagens onde os usuários podem carregar e reorganizar as imagens.
- Widgets: os usuários podem personalizar a aparência do aplicativo arrastando e soltando widgets.
- Carrinho de compras: os usuários podem clicar em um item, arrastá-lo e soltá-lo no carrinho.
Uma biblioteca React Drag and Drop é um conjunto de componentes pré-construídos que permitem aos desenvolvedores implementar a funcionalidade Drag and Drop em aplicativos React.
Essas bibliotecas vêm com componentes reutilizáveis, permitindo que os desenvolvedores criem elementos que podem ser arrastados e soltos. As bibliotecas lidam com diferentes eventos, como arrastar para iniciar, arrastar para entrar, arrastar para sair e soltar.
últimas postagens
Como as bibliotecas de arrastar e soltar ajudarão a melhorar as interações da interface do usuário
- Experiência do usuário aprimorada: a funcionalidade de arrastar e soltar é uma abordagem intuitiva para os usuários interagirem com um aplicativo. A opção de arrastar e soltar itens em vez de inseri-los manualmente fornece uma interação interativa e contínua.
- Fluxos de trabalho simplificados: em vez de carregar arquivos de diferentes locais do seu computador para um aplicativo, basta arrastá-los e soltá-los.
- Maior produtividade: a funcionalidade de arrastar e soltar economiza tempo, tornando os usuários mais produtivos.
- Adequado para dispositivos móveis: dispositivos móveis como smartphones e tablets têm espaço de tela limitado. Os usuários dependem principalmente de gestos para navegação, o que torna o arrastar e soltar uma adição incrível.
- Fornece interfaces atraentes: a funcionalidade de arrastar e soltar pode adicionar apelo visual à interface do usuário do seu aplicativo. Você pode adicionar animações que fornecem feedback ou descrevem ações conforme os usuários arrastam e soltam itens no aplicativo.
Estas são as melhores bibliotecas React de arrastar e soltar:
Reagir DnD
React DnD é um conjunto de utilitários React para construir interfaces complexas de arrastar e soltar. Esta biblioteca é perfeita para criar aplicativos semelhantes ao Trello e Storify, onde a funcionalidade de arrastar e soltar também envolve a transferência de dados.
Instalação;
npm install react-dnd react-dnd-html5-backend
Você pode importar React DnD para seu componente React como;
import { useDrag } from 'react-dnd'
Características principais
- Funciona com seus componentes: Esta biblioteca não fornece widgets prontos. No entanto, ele envolve seus componentes e injeta props neles.
- Extensível: você pode adicionar um back-end personalizado com base em eventos de mouse ou eventos de toque ao usar a biblioteca React DnD.
- Testável: você pode usar Jest ou Enzyme para testar o código React DnD.
- Suporte de toque: React DnD touch backend adiciona a funcionalidade de toque a esta biblioteca.
React DnD é uma biblioteca gratuita e de código aberto.
Reagir arrastável
O React Draggable é uma biblioteca React simples, porém poderosa, que facilita a criação de elementos arrastáveis.
Instalação;
npm install reagir-arrastar
Para usar o React Draggable, importe da seguinte maneira em seu componente React.
import Draggable from 'react-draggable';
Características
- Fácil de instalar e configurar: você só precisa instalar e importar a biblioteca para começar. Você também pode importar componentes individuais da biblioteca.
- Compatível com JavaScript vanilla e React: Você pode usar o React Draggable com JavaScript simples da seguinte maneira;
let Draggable = require('react-draggable');
let DraggableCore = Draggable.DraggableCore;
- Compatível com outras bibliotecas React: Você pode usar React Draggable com outras bibliotecas, como React Grid Layout.
React Draggable é uma biblioteca Drap and Drop React gratuita e de código aberto.
Reagir Dropzone
O React Dropzone é um React Hook simples para criar uma zona de arrastar e soltar compatível com HTML-5 para arquivos.
Instalação;
npm install –save react-dropzone
ou:
fio adicionar react-dropzone
Você pode então importar esta biblioteca da seguinte maneira;
import {useDropzone} from 'react-dropzone';
Características
- Estilizando Dropzone: Esta biblioteca não define nenhuma regra de estilização e, portanto, você pode estilizar seus componentes como achar melhor.
- Permite que os usuários definam tipos de arquivo aceitáveis: Você pode instruir o Dropzone a aceitar ou rejeitar certos tipos de arquivo fornecendo aceitar prop.
- Aceita validação personalizada: A propriedade do validador permite que você especifique a validação personalizada para diferentes arquivos.
O React Dropzone é uma biblioteca React de arrastar e soltar gratuita e de código aberto.
Layout da Grade de Reação
React Grid Layout é um layout de grade redimensionável e arrastável para o React.
Instalação;
npm install react-grid-layout
Você pode importar esta biblioteca da seguinte maneira;
import GridLayout from "react-grid-layout";
Características
- Livre de dependências: React Grid Layout é construído exclusivamente em React e é livre de JQuery.
- Widgets redimensionáveis: além do recurso de arrastar e soltar, você também pode redimensionar os componentes.
- Pontos de interrupção responsivos: a biblioteca fornece um layout separado para cada ponto de interrupção.
- Personalizável: você pode adicionar ou remover widgets sem reconstruir toda a grade.
O React Grid Layout é uma biblioteca React gratuita e de código aberto.
Reagir rnd
React rnd é um componente arrastável e redimensionável para React.
Instalação;
npm i -S react-rnd
Ou
yarn add react-rnd
Características
- Simples: React rnd foi projetado para ser simples, mas muito poderoso.
- Compatível com TypeScript e JavaScript: você pode usar o React rnd com seu aplicativo, independentemente de tê-lo configurado com JavaScript ou TypeScript.
- Suporta redimensionamento: você pode facilmente redimensionar os componentes criados usando o React rnd para atender às suas necessidades.
React rnd é uma biblioteca React gratuita e de código aberto.
Reagir dnd virtualizado
React Virtualized dnd é uma estrutura React de arrastar e soltar que apresenta barras de rolagem de virtualização integradas.
Instalação;
npm install –save react-virtualized-dnd
Você pode importar React Virtualized dnd como;
import ExampleBoard from 'react-virtualized-dnd';
Características
- Variedade de componentes para escolher: Os componentes são agrupados em “Altura Fixa”, “Altura Variável” e “Agrupáveis”.
- Personalizável: você pode personalizar os componentes do React Virtualized dnd para atender às suas necessidades.
React Virtualized dnd é uma estrutura React de código aberto cujo código-fonte está hospedado no GitHub.
Reagir móvel
React Movable é uma biblioteca React de arrastar e soltar para listas e tabelas.
Instalação;
yarn add react-movable
Você pode importar esta biblioteca como;
import { List, arrayMove } from 'react-movable';
Características
- Várias opções de arrastar e soltar para escolher: A biblioteca possui códigos padronizados para diferentes tipos de componentes de arrastar e soltar para escolher.
- Biblioteca leve: React Movable não possui dependências como JQuery. É menos de 4kB (gzipado).
- Estilo sem opinião: o React Movable não controla como você deseja estilizar seu aplicativo.
- Suporte de toque: esta biblioteca ajuda a criar aplicativos que podem ser usados em smartphones, tablets e qualquer dispositivo com funcionalidade de toque.
- Escrito em TypeScript: você pode introduzir Tipos em seu código, uma funcionalidade indisponível em JavaScript.
O React Movable é uma biblioteca React gratuita e de código aberto.
Arrastável
Draggable é uma biblioteca React de arrastar e soltar que permite aos desenvolvedores criar eventos de arrastar e soltar ao abstrair eventos nativos do navegador em uma API abrangente.
Instalação;
npm install @shopify/draggable –save
ou através de fios:
fio adicionar @shopify/arrastável
Você pode importar Draggable para seu aplicativo React como;
import { Draggable } from '@shopify/draggable';
Características
- Componentes categorizados: Encontrar o componente exato a ser usado é fácil, pois os componentes são categorizados. Esses componentes são personalizáveis.
- Compatível com os principais navegadores: você pode usar o Draggable com navegadores como Google Chrome, Mozilla Firefox e Apple Safari.
- Suporta TypeScript: ao trabalhar com esta biblioteca, você pode adicionar definições de TypeScript ao seu código.
- Suporta plug-ins: você pode adicionar à funcionalidade do Draggable com plug-ins como Collidable e SwapAnimation.
Draggable é uma biblioteca React gratuita e de código aberto mantida por colaboradores.
Reagir Arraste para selecionar
React arrastar para selecionar é uma biblioteca React que você pode usar para adicionar a funcionalidade arrastar para selecionar ao seu aplicativo.
Instalação;
npm install –save @air/react-drag-to-select
Ou
fio adicionar @air/reagir-arrastar-para-selecionar
Você pode importar esta biblioteca para seu aplicativo da seguinte maneira;
import { useSelectionContainer } from '@air/react-drag-to-select'
Características
- Simples: esta biblioteca não seleciona itens. No entanto, a biblioteca desenha a caixa de seleção e fornece as coordenadas.
- Suporta TypeScript: a biblioteca React Drag-to-select é escrita em TypeScript, o que significa que você pode usá-la com aplicativos React escritos em TypeScript e JavaScript.
- Suporta testes: você pode usar esta biblioteca com a maioria das estruturas de teste do React.
React Drag-to-select é uma biblioteca gratuita e de código aberto.
Reagir Dragula
React Dragula é uma biblioteca React simples de arrastar e soltar.
Instalação;
npm install react-dragula –save
Ou,
bower install react-dragula –save
Características
- Personalizável: você pode personalizar os componentes do React Dragula para atender às suas necessidades.
- Suporta toque: você pode usar esta biblioteca para criar aplicativos que podem ser usados em smartphones, tablets e outros dispositivos de toque.
- Leve: React Dragula tem um tamanho de pacote pequeno, tornando-o perfeito se você deseja que seu aplicativo React seja pequeno.
React Dragula é uma biblioteca gratuita e de código aberto.
Conclusão
Agora você tem uma variedade de bibliotecas de arrastar e soltar que pode usar em seu próximo aplicativo React. A escolha da biblioteca dependerá dos recursos que você pretende ter em seu próximo aplicativo, gosto e preferências.
Se seu aplicativo for grande, você pode usar várias bibliotecas de arrastar e soltar para atender a diferentes necessidades. A maioria dessas bibliotecas é compatível com várias bibliotecas de teste do React, facilitando o envio de aplicativos sem erros.