React es una famosa biblioteca JavaScript de interfaz de usuario (UI). Puede utilizar la biblioteca React para crear diferentes tipos de aplicaciones web que van desde aplicaciones de medios sociales, plataformas de comercio electrónico, blogs, aplicaciones de una sola página, sistemas de gestión de contenidos (CMS), cuadros de mando y visualizaciones de datos, por mencionar algunos.
Los desarrolladores pueden ampliar la funcionalidad de las aplicaciones React utilizando diversas bibliotecas y marcos de trabajo. Dichas bibliotecas pueden agruparse en diferentes clases; Arrastrar y Soltar es una categoría de biblioteca bastante popular.
La funcionalidad de arrastrar y soltar es una interacción de interfaz de usuario que permite a un usuario hacer clic/elegir un elemento en la pantalla, arrastrarlo y soltarlo sobre otro componente. Un ejemplo perfecto de esta funcionalidad es reordenar los elementos de una lista arrastrándolos y soltándolos en el lugar deseado.
También puede utilizar la funcionalidad de arrastrar y soltar en los siguientes casos;
- Carga de archivos: Los usuarios pueden arrastrar y soltar archivos en lugar de desplazarse por sus máquinas para seleccionar y cargar archivos.
- Tableros Kanban: Puede crear un tablero en el que los usuarios puedan arrastrar y soltar elementos en función de los niveles o etapas de actividad.
- Galerías de imágenes: Puede disponer de una galería de imágenes en la que los usuarios puedan cargar y reorganizar imágenes.
- Widgets: Los usuarios pueden personalizar el aspecto de la aplicación arrastrando y soltando widgets.
- Cesta de la compra: Los usuarios pueden hacer clic en un artículo, arrastrarlo y soltarlo en el carrito.
Una biblioteca React Drag and Drop es un conjunto de componentes preconstruidos que permiten a los desarrolladores implementar la funcionalidad Drag and Drop en aplicaciones React.
Estas librerías vienen con componentes reutilizables, permitiendo a los desarrolladores crear elementos que pueden ser arrastrados y soltados. Las librerías manejan diferentes eventos como arrastrar inicio, arrastrar entrada, arrastrar salida y soltar.
Cómo ayudarán las bibliotecas de arrastrar y soltar a mejorar las interacciones de la interfaz de usuario
- Mejora de la experiencia del usuario: La funcionalidad de arrastrar y soltar es un enfoque intuitivo para que los usuarios interactúen con una aplicación. La opción de arrastrar y soltar elementos en lugar de introducirlos manualmente proporciona una interacción interactiva y sin fisuras.
- Flujos de trabajo simplificados: En lugar de cargar archivos desde distintas ubicaciones de su ordenador a una aplicación, puede simplemente arrastrarlos y soltarlos.
- Mayor productividad: La función de arrastrar y soltar ahorra tiempo, lo que hace que los usuarios sean más productivos.
- Adecuado para dispositivos móviles: Los dispositivos móviles como teléfonos inteligentes y tabletas tienen un espacio de pantalla limitado. Los usuarios confían sobre todo en los gestos para navegar, lo que hace que arrastrar y soltar sea un complemento impresionante.
- Proporciona interfaces atractivas: La funcionalidad de arrastrar y soltar puede añadir atractivo visual a la interfaz de usuario de su aplicación. Puede añadir animaciones que proporcionen información o describan acciones a medida que los usuarios arrastran y sueltan elementos en la aplicación.
Estas son las mejores librerías Drag and Drop de React:
React DnD
React DnD es un conjunto de utilidades React para construir interfaces complejas de arrastrar y soltar. Esta librería es perfecta para crear apps similares a Trello y Storify, donde la funcionalidad de arrastrar y soltar también implica la transferencia de datos.
Instalación;
npm install react-dnd react-dnd-html5-backend
Puede importar React DnD a su componente React como;
import { useDrag } from 'react-dnd'Características principales
- Funciona con sus componentes: Esta biblioteca no proporciona widgets ya hechos. Sin embargo, envuelve sus componentes y les inyecta props.
- Extensible: Puede añadir un backend personalizado basado en eventos de ratón o eventos táctiles cuando utilice la biblioteca React DnD.
- Comprobable: Puede utilizar Jest o Enzyme para probar el código de React DnD.
- Soporte táctil: El backendtáctil de React DnD añade funcionalidad táctil a esta librería.
React DnD es una librería gratuita y de código abierto.
React Draggable
ReactDraggable es una sencilla pero potente librería React que facilita la creación de elementos arrastrables.
Instalación;
npm install react-draggable
Para usar React Draggable, importe como sigue en su componente React.
import Draggable from 'react-draggable';Características
- Fácil de instalar y configurar: Sólo tiene que instalar e importar la biblioteca para empezar. También puede importar componentes individuales de la biblioteca.
- Compatible con JavaScript planoy React : Puede utilizar React Draggable con JavaScript plano de la siguiente manera;
let Draggable = require('react-draggable');
let DraggableCore = Draggable.DraggableCore;- Compatible con otras librerías React: Puede utilizar React Draggable con otras bibliotecas, como React Grid Layout.
React Draggable es una librería React Drap and Drop gratuita y de código abierto.
React Dropzone
React Dropzone es un sencillo gancho React para crear una zona de arrastrar y soltar para archivos compatible con HTML-5.
Instalación;
npm install --save react-dropzone
o
yarn add react-dropzone
A continuación, puede importar esta biblioteca de la siguiente manera
import {useDropzone} from 'react-dropzone';Características
- Estilización de Dropzone: Esta biblioteca no establece ninguna regla de estilo, por lo que puede dar estilo a sus componentes como mejor le parezca.
- Permite a los usuarios definir los tipos de archivo aceptables: Puede indicar a Dropzone que acepte o rechace determinados tipos de archivo proporcionando accept prop.
- Acepta la validación personalizada: La prop validator le permite especificar una validación personalizada para distintos archivos.
React Dropzone es una librería React Drag and Drop gratuita y de código abierto.
React Grid Layout
ReactGrid Layout es un diseño de rejilla redimensionable y arrastrable para React.
Instalación;
npm install react-grid-layout
Puede importar esta librería de la siguiente manera
import GridLayout from "react-grid-layout";Características
- Libre de dependencias: React Grid Layout está construido puramente sobre React y está libre de JQuery.
- Widgets redimensionables: Además de la función de arrastrar y soltar, también puede cambiar el tamaño de los componentes.
- Puntos de ruptura responsivos: La biblioteca proporciona un diseño independiente para cada punto de interrupción.
- Personalizable: Puede añadir o eliminar widgets sin necesidad de reconstruir toda la cuadrícula.
React Grid Layout es una librería React gratuita y de código abierto.
React rnd
Reactrnd es un componente arrastrable y redimensionable para React.
Instalación;
npm i -S react-rnd
O
yarn add react-rnd
Características
- Sencillo: React rnd está diseñado para ser sencillo pero muy potente.
- Compatible tanto con TypeScript como con JavaScript: Puede utilizar React rnd con su aplicación independientemente de si la ha configurado con JavaScript o TypeScript.
- Compatible con elredimensionamiento: Puede redimensionar fácilmente los componentes creados con React rnd para adaptarlos a sus necesidades.
React rnd es una biblioteca React gratuita y de código abierto.
React Virtualized dnd
React Virtualizeddnd es un framework React de arrastrar y soltar que incorpora barras de desplazamiento virtualizadoras.
Instalación;
npm install --save react-virtualized-dnd
Puede importar React Virtualized dnd como;
import ExampleBoard from 'react-virtualized-dnd';Características
- Variedad de componentes para elegir: Los componentes se agrupan en «Altura fija», «Altura variable» y «Droppables agrupables».
- Personalizables: Puede personalizar los componentes de React Virtualized dnd para adaptarlos a sus necesidades.
React Virtualized dnd es un framework React de código abierto cuyo código fuente está alojado en GitHub.
React Movable
ReactMovable es una librería React de arrastrar y soltar para listas y tablas.
Instalación;
yarn add react-movable
Puede importar esta biblioteca como
import { List, arrayMove } from 'react-movable';Características
- Varias opciones de arrastrar ysoltar entre las que elegir: La biblioteca tiene códigos boilerplate para diferentes tipos de componentes de arrastrar y soltar entre los que elegir.
- Biblioteca ligera: React Movable no tiene dependencias como JQuery. Ocupa menos de 4kB (gzipped).
- Estilización no integrada: React Movable no controla el estilo que usted quiera dar a su aplicación.
- Soporte táctil: Esta biblioteca ayuda a crear aplicaciones que se pueden utilizar en teléfonos inteligentes, tabletas y cualquier dispositivo con funcionalidad táctil.
- Escrito en TypeScript: Puede introducir Types en su código, una funcionalidad no disponible en JavaScript.
React Movable es una biblioteca React gratuita y de código abierto.
Draggable
Draggable es una biblioteca React de arrastrar y soltar que permite a los desarrolladores crear eventos de arrastrar y soltar abstrayendo los eventos nativos del navegador en una API completa.
Instalación;
npm install @shopify/draggable --save
o mediante yarn
yarn add @shopify/draggable
Puede importar Draggable a su aplicación React como;
import { Draggable } from '@shopify/draggable';Características
- Componentes categorizados: Encontrar el componente exacto a utilizar es fácil ya que los componentes están categorizados. Estos componentes son personalizables.
- Compatible con los principales navegadores: Puede utilizar Draggable con navegadores como Google Chrome, Mozilla Firefox y Apple Safari.
- Compatible con TypeScript: Cuando trabaje con esta biblioteca, podrá añadir definiciones de TypeScript a su código.
- Soporta plugins: Puede ampliar la funcionalidad de Draggable con plugins como Collidable y SwapAnimation.
Draggable es una librería React gratuita y de código abierto mantenida por colaboradores.
React Arrastrar para seleccionar
Reactdrag-to-select es una librería React que puede utilizar para añadir la funcionalidad de arrastrar para seleccionar a su aplicación.
Instalación;
npm install --save @air/react-drag-to-select
O
yarn add @air/react-drag-to-select
Puede importar esta librería a su aplicación de la siguiente manera;
import { useSelectionContainer } from '@air/react-drag-to-select'Características
- Simple: Esta biblioteca no selecciona elementos. Sin embargo, la biblioteca dibuja el cuadro de selección y le da las coordenadas.
- Compatible con TypeScript: La biblioteca React Drag-to-select está escrita en TypeScript, lo que significa que puede utilizarla con aplicaciones React escritas en TypeScript y JavaScript.
- Soporta pruebas: Puede utilizar esta biblioteca con la mayoría de los marcos de pruebas de React.
React Drag-to-select es una librería gratuita y de código abierto.
React Dragula
ReactDragula es una sencilla librería React de arrastrar y soltar.
Instalación;
npm install react-dragula --save
O
bower install react-dragula --save
Características
- Personalizable: Puede personalizar los componentes de React Dragula para adaptarlos a sus necesidades.
- Soporta touch: Puede utilizar esta librería para crear aplicaciones que puedan ser utilizadas en smartphones, tablets y otros dispositivos táctiles.
- Ligera: React Dragula tiene un tamaño de paquete pequeño, lo que la hace perfecta si quiere que su aplicación React sea pequeña.
React Dragula es una librería gratuita y de código abierto.
Conclusión
Ahora tiene una variedad de librerías Drag-and-Drop que puede utilizar en su próxima aplicación React. La elección de la librería dependerá de las características que pretenda tener en su próxima aplicación, gustos y preferencias.
Si su aplicación es grande, puede utilizar varias bibliotecas de arrastrar y soltar para satisfacer diferentes necesidades. La mayoría de estas bibliotecas son compatibles con varias bibliotecas de pruebas de React, lo que facilita el envío de aplicaciones sin errores.