React est une célèbre bibliothèque JavaScript d’interface utilisateur (UI). Vous pouvez utiliser la bibliothèque React pour créer différents types d’applications Web, allant des applications de médias sociaux, des plateformes de commerce électronique, des blogs, des applications d’une seule page, des systèmes de gestion de contenu (CMS), des tableaux de bord et des visualisations de données, pour n’en citer que quelques-uns.
Les développeurs peuvent étendre les fonctionnalités des applications React à l’aide de diverses bibliothèques et frameworks. De telles bibliothèques peuvent être regroupées en différentes classes ; Le glisser-déposer est une catégorie de bibliothèque très populaire.
La fonctionnalité glisser-déposer est une interaction de l’interface utilisateur qui permet à un utilisateur de cliquer/sélectionner un élément à l’écran, de le faire glisser et de le déposer sur un autre composant. Un exemple parfait de cette fonctionnalité est la réorganisation des éléments dans une liste en faisant glisser et en déposant des éléments à l’emplacement souhaité.
Vous pouvez également utiliser la fonctionnalité Glisser-déposer dans les cas suivants ;
- Téléchargement de fichiers : les utilisateurs peuvent faire glisser et déposer des fichiers au lieu de faire défiler leurs machines pour sélectionner et télécharger des fichiers.
- Tableaux Kanban : vous pouvez créer un tableau de bord dans lequel les utilisateurs peuvent faire glisser et déposer des éléments en fonction des niveaux ou des étapes d’activité.
- Galeries d’images : vous pouvez disposer d’une galerie d’images dans laquelle les utilisateurs peuvent télécharger et réorganiser les images.
- Widgets : les utilisateurs peuvent personnaliser l’apparence de l’application en faisant glisser et en déposant des widgets.
- Panier : les utilisateurs peuvent cliquer sur un article, le faire glisser et le déposer dans le panier.
Une bibliothèque React Drag and Drop est un ensemble de composants prédéfinis qui permettent aux développeurs d’implémenter la fonctionnalité Drag and Drop dans les applications React.
Ces bibliothèques sont livrées avec des composants réutilisables, permettant aux développeurs de créer des éléments qui peuvent être glissés et déposés. Les bibliothèques gèrent différents événements tels que glisser démarrer, glisser entrer, glisser quitter et déposer.
Table des matières
Comment les bibliothèques de glisser-déposer aideront à améliorer les interactions de l’interface utilisateur
- Expérience utilisateur améliorée : la fonctionnalité de glisser-déposer est une approche intuitive permettant aux utilisateurs d’interagir avec une application. L’option de glisser-déposer des éléments au lieu de les saisir manuellement offre une interaction interactive et transparente.
- Flux de travail simplifiés : au lieu de télécharger des fichiers depuis différents emplacements de votre ordinateur vers une application, vous pouvez simplement les faire glisser et les déposer.
- Productivité accrue : la fonctionnalité de glisser-déposer permet de gagner du temps, ce qui rend les utilisateurs plus productifs.
- Convient aux appareils mobiles : les appareils mobiles tels que les smartphones et les tablettes disposent d’un espace d’écran limité. Les utilisateurs s’appuient principalement sur les gestes pour la navigation, ce qui fait du glisser-déposer un ajout formidable.
- Fournit des interfaces attrayantes : la fonctionnalité de glisser-déposer peut ajouter un attrait visuel à l’interface utilisateur de votre application. Vous pouvez ajouter des animations qui fournissent des commentaires ou décrivent des actions lorsque les utilisateurs font glisser et déposent des éléments sur l’application.
Voici les meilleures bibliothèques Drag and Drop React :
Réagissez DnD
React DnD est un ensemble d’utilitaires React permettant de créer des interfaces glisser-déposer complexes. Cette bibliothèque est parfaite pour créer des applications similaires à Trello et Storify, où la fonctionnalité glisser-déposer implique également le transfert de données.
Installation;
npm installer réagir-dnd réagir-dnd-html5-backend
Vous pouvez importer React DnD dans votre composant React en tant que ;
import { useDrag } from 'react-dnd'Principales caractéristiques
- Fonctionne avec vos composants : cette bibliothèque ne fournit pas de widgets prêts à l’emploi. Cependant, il enveloppe vos composants et y injecte des accessoires.
- Extensible : vous pouvez ajouter un backend personnalisé basé sur des événements de souris ou des événements tactiles lorsque vous utilisez la bibliothèque React DnD.
- Testable : Vous pouvez utiliser Jest ou Enzyme pour tester le code React DnD.
- Prise en charge tactile : React DnD touch backend ajoute une fonctionnalité tactile à cette bibliothèque.
React DnD est une bibliothèque open source gratuite.
Réagir déplaçable
React Draggable est une bibliothèque React simple mais puissante qui facilite la création d’éléments déplaçables.
Installation;
npm installer réagir-glisser
Pour utiliser React Draggable, importez comme suit sur votre composant React.
import Draggable from 'react-draggable';
Caractéristiques
- Facile à installer et à configurer : Il vous suffit d’installer et d’importer la bibliothèque pour commencer. Vous pouvez également importer des composants individuels à partir de la bibliothèque.
- Compatible avec JavaScript vanille et React : vous pouvez utiliser React Draggable avec du JavaScript simple comme suit ;
let Draggable = require('react-draggable');
let DraggableCore = Draggable.DraggableCore;- Compatible avec d’autres bibliothèques React : vous pouvez utiliser React Draggable avec d’autres bibliothèques, telles que React Grid Layout.
React Draggable est une bibliothèque Drap and Drop React gratuite et open source.
Réagissez Dropzone
React Dropzone est un React Hook simple pour créer une zone de glisser-déposer compatible HTML-5 pour les fichiers.
Installation;
npm installer – enregistrer réagir-dropzone
ou:
fil ajouter réagir-dropzone
Vous pouvez ensuite importer cette bibliothèque comme suit ;
import {useDropzone} from 'react-dropzone';Caractéristiques
- Styling Dropzone : Cette bibliothèque ne définit aucune règle de style, et vous pouvez ainsi styliser vos composants comme bon vous semble.
- Permet aux utilisateurs de définir des types de fichiers acceptables : vous pouvez demander à Dropzone d’accepter ou de rejeter certains types de fichiers en fournissant accept prop.
- Accepte la validation personnalisée : le prop validator vous permet de spécifier une validation personnalisée pour différents fichiers.
React Dropzone est une bibliothèque Drag and Drop React gratuite et open source.
Disposition de la grille de réaction
React Grid Layout est une disposition de grille redimensionnable et déplaçable pour React.
Installation;
npm installez la mise en page de la grille de réaction
Vous pouvez importer cette bibliothèque comme suit ;
import GridLayout from "react-grid-layout";
Caractéristiques
- Sans dépendances : React Grid Layout est construit uniquement sur React et est exempt de JQuery.
- Widgets redimensionnables : en plus de la fonction glisser-déposer, vous pouvez également redimensionner les composants.
- Points d’arrêt réactifs : la bibliothèque fournit une mise en page distincte pour chaque point d’arrêt.
- Personnalisable : vous pouvez ajouter ou supprimer des widgets sans reconstruire l’intégralité de la grille.
React Grid Layout est une bibliothèque React gratuite et open source.
Réagissez
React rnd est un composant déplaçable et redimensionnable pour React.
Installation;
npm i -S réagir-rnd
Ou
fil ajouter réagir-rnd
Caractéristiques
- Simple : React rnd est conçu pour être simple mais très puissant.
- Compatible avec TypeScript et JavaScript : vous pouvez utiliser React rnd avec votre application, que vous l’ayez configurée avec JavaScript ou TypeScript.
- Prend en charge le redimensionnement : vous pouvez facilement redimensionner les composants créés à l’aide de React rnd en fonction de vos besoins.
React rnd est une bibliothèque React gratuite et open source.
Réagissez mdn virtualisé
React Virtualized dnd est un framework React par glisser-déposer qui comporte des barres de défilement de virtualisation intégrées.
Installation;
npm install –save react-virtualized-dnd
Vous pouvez importer React Virtualized dnd en tant que;
import ExampleBoard from 'react-virtualized-dnd';
Caractéristiques
- Variété de composants au choix : les composants sont regroupés en « Hauteur fixe », « Hauteur variable » et « Droppables groupables ».
- Personnalisable : Vous pouvez personnaliser les composants de React Virtualized dnd en fonction de vos besoins.
React Virtualized dnd est un framework React open-source dont le code source est hébergé sur GitHub.
Réagir mobile
React Movable est une bibliothèque React par glisser-déposer pour les listes et les tableaux.
Installation;
fil ajouter réagir-mobile
Vous pouvez importer cette bibliothèque en tant que ;
import { List, arrayMove } from 'react-movable';Caractéristiques
- Diverses options de glisser-déposer au choix : la bibliothèque propose des codes passe-partout pour différents types de composants de glisser-déposer parmi lesquels choisir.
- Bibliothèque légère : React Movable n’a pas de dépendances telles que JQuery. Il fait moins de 4kB (gzippé).
- Style sans opinion : React Movable ne contrôle pas la manière dont vous souhaitez styliser votre application.
- Prise en charge tactile : cette bibliothèque permet de créer des applications pouvant être utilisées sur les smartphones, les tablettes et tout appareil doté de la fonctionnalité tactile.
- Écrit en TypeScript : vous pouvez introduire des types dans votre code, une fonctionnalité non disponible en JavaScript.
React Movable est une bibliothèque React gratuite et open source.
Déplaçable
Draggable est une bibliothèque React par glisser-déposer qui permet aux développeurs de créer des événements par glisser-déposer en extrayant les événements du navigateur natif dans une API complète.
Installation;
npm install @shopify/draggable –save
ou via fil:
fil ajouter @shopify/draggable
Vous pouvez importer Draggable dans votre application React en tant que ;
import { Draggable } from '@shopify/draggable';Caractéristiques
- Composants classés : Il est facile de trouver le composant exact à utiliser car les composants sont classés. Ces composants sont personnalisables.
- Compatible avec les principaux navigateurs : vous pouvez utiliser Draggable avec des navigateurs tels que Google Chrome, Mozilla Firefox et Apple Safari.
- Prend en charge TypeScript : lorsque vous travaillez avec cette bibliothèque, vous pouvez ajouter des définitions TypeScript à votre code.
- Prend en charge les plugins : vous pouvez ajouter aux fonctionnalités de Draggable des plugins tels que Collidable et SwapAnimation.
Draggable est une bibliothèque React gratuite et open source gérée par des contributeurs.
Faire glisser pour sélectionner
React drag-to-select est une bibliothèque React que vous pouvez utiliser pour ajouter une fonctionnalité de glisser-sélectionner à votre application.
Installation;
npm install –save @air/react-drag-to-select
Ou
fil ajouter @air/react-drag-to-select
Vous pouvez importer cette bibliothèque dans votre application comme suit ;
import { useSelectionContainer } from '@air/react-drag-to-select'Caractéristiques
- Simple : cette bibliothèque ne sélectionne pas les éléments. Cependant, la bibliothèque dessine la boîte de sélection et vous donne des coordonnées.
- Prend en charge TypeScript : la bibliothèque React Drag-to-select est écrite en TypeScript, ce qui signifie que vous pouvez l’utiliser avec les applications React écrites en TypeScript et JavaScript.
- Prend en charge les tests : vous pouvez utiliser cette bibliothèque avec la plupart des frameworks de test React.
React Drag-to-select est une bibliothèque open-source gratuite.
Réagir Dragula
React Dragula est une simple bibliothèque React par glisser-déposer.
Installation;
npm installer réagir-dragula – enregistrer
Ou,
bower installer réagir-dragula –save
Caractéristiques
- Personnalisable : Vous pouvez personnaliser les composants de React Dragula en fonction de vos besoins.
- Prise en charge tactile : vous pouvez utiliser cette bibliothèque pour créer des applications pouvant être utilisées sur les smartphones, tablettes et autres appareils tactiles.
- Léger : React Dragula a une petite taille de paquet, ce qui le rend parfait si vous voulez que votre application React soit petite.
React Dragula est une bibliothèque gratuite et open source.
Conclusion
Vous disposez maintenant d’une variété de bibliothèques Drag-and-Drop que vous pouvez utiliser sur votre prochaine application React. Le choix de la bibliothèque dépendra des fonctionnalités que vous souhaitez avoir sur votre prochaine application, de vos goûts et de vos préférences.
Si votre application est volumineuse, vous pouvez utiliser plusieurs bibliothèques de glisser-déposer pour répondre à différents besoins. La plupart de ces bibliothèques sont compatibles avec diverses bibliothèques de test React, ce qui facilite la livraison d’applications sans erreur.