React se présente comme une librairie JavaScript de premier plan pour la conception d’interfaces utilisateur (UI). Elle offre un cadre flexible pour le développement d’une large gamme d’applications web, allant des réseaux sociaux aux plateformes e-commerce, en passant par les blogs, les applications monopages, les systèmes de gestion de contenu (CMS), les tableaux de bord et les outils de visualisation de données, entre autres.
Les développeurs ont la possibilité d’enrichir les applications React avec des fonctionnalités avancées via diverses librairies et frameworks. Ces outils peuvent être classés en plusieurs catégories, dont le glisser-déposer, une fonctionnalité particulièrement prisée.
Le glisser-déposer est une interaction d’interface utilisateur intuitive qui permet à un utilisateur de sélectionner un élément à l’écran, de le déplacer par un simple geste et de le déposer à un autre endroit. Un cas d’utilisation typique est la réorganisation des éléments dans une liste, en les faisant glisser vers la position désirée.
La fonctionnalité de glisser-déposer peut également s’avérer utile dans divers scénarios :
- Téléchargement de fichiers : Permet aux utilisateurs de télécharger des fichiers par un simple glisser-déposer, plutôt que de naviguer dans l’arborescence de leur machine.
- Tableaux Kanban : Facilite la création de tableaux de bord où les éléments sont déplacés en fonction de leur statut ou de l’étape du processus.
- Galeries d’images : Permet de télécharger et réorganiser des images de manière visuelle et interactive.
- Widgets : Offre la possibilité aux utilisateurs de personnaliser l’apparence de l’application en réarrangeant les widgets.
- Paniers d’achat : Permet de déplacer des articles du catalogue directement dans le panier par un simple glisser-déposer.
Une librairie React de glisser-déposer met à disposition un ensemble de composants pré-construits qui simplifient l’implémentation de cette fonctionnalité dans les applications React.
Ces librairies proposent des composants réutilisables qui permettent de créer des éléments interactifs qui peuvent être déplacés et déposés. Elles gèrent également divers événements tels que le début du glissement, l’entrée dans une zone cible, la sortie et le dépôt.
Comment les bibliothèques de glisser-déposer améliorent les interactions de l’interface utilisateur
- Expérience utilisateur optimisée : L’approche intuitive du glisser-déposer rend l’interaction avec l’application plus naturelle et plus fluide.
- Flux de travail simplifié : Le glisser-déposer de fichiers permet un téléchargement plus rapide et direct, sans passer par les sélecteurs de fichiers traditionnels.
- Productivité accrue : En faisant gagner du temps et en simplifiant l’interaction, le glisser-déposer améliore la productivité de l’utilisateur.
- Adapté aux appareils mobiles : Le glisser-déposer est particulièrement pertinent sur les écrans tactiles des smartphones et tablettes où il s’intègre bien avec les gestes de navigation.
- Interfaces attrayantes : Le glisser-déposer peut être rendu plus engageant grâce à des animations qui fournissent un retour visuel aux actions de l’utilisateur.
Voici une sélection des meilleures librairies Drag and Drop pour React :
React DnD
React DnD est un ensemble d’outils pour React qui permet de construire des interfaces de glisser-déposer complexes. Cette librairie est particulièrement bien adaptée aux applications comme Trello ou Storify, où le glisser-déposer implique également le transfert de données.
Installation :
npm install react-dnd react-dnd-html5-backend
L’importation de React DnD dans un composant React se fait de la manière suivante :
import { useDrag } from 'react-dnd'
Principales caractéristiques :
- Intégration avec vos composants : La librairie n’offre pas de widgets prêts à l’emploi, mais plutôt une couche qui enveloppe vos composants et leur injecte des fonctionnalités de glisser-déposer.
- Extensibilité : La flexibilité de React DnD permet d’ajouter des backends personnalisés basés sur les événements de la souris ou les événements tactiles.
- Testabilité : Le code utilisant React DnD peut être testé avec des outils comme Jest ou Enzyme.
- Support tactile : Le backend tactile de React DnD permet d’ajouter des fonctionnalités tactiles à la librairie.
React DnD est une librairie open source gratuite.
React Draggable
React Draggable est une librairie simple et efficace pour la création d’éléments déplaçables.
Installation :
npm install react-draggable
Pour utiliser React Draggable, il faut importer le module de cette façon :
import Draggable from 'react-draggable';
Caractéristiques :
- Installation et configuration simplifiées : Il suffit d’installer et d’importer la librairie pour commencer à l’utiliser. Il est également possible d’importer des composants individuels.
- Compatibilité avec JavaScript et React : React Draggable peut être utilisé avec du JavaScript pur comme suit :
let Draggable = require('react-draggable');
let DraggableCore = Draggable.DraggableCore;
- Compatibilité avec d’autres librairies React : React Draggable peut être utilisé conjointement avec d’autres librairies comme React Grid Layout.
React Draggable est une librairie Drag and Drop gratuite et open source pour React.
React Dropzone
React Dropzone est un hook React permettant de créer facilement une zone de glisser-déposer compatible avec HTML5 pour les fichiers.
Installation :
npm install –save react-dropzone
ou :
yarn add react-dropzone
L’importation de la librairie se fait de cette manière :
import {useDropzone} from 'react-dropzone';
Caractéristiques :
- Style personnalisable : React Dropzone ne définit pas de styles par défaut, ce qui donne une grande liberté pour la personnalisation des composants.
- Définition des types de fichiers acceptés : Il est possible de configurer Dropzone pour accepter ou refuser certains types de fichiers à l’aide de la propriété « accept ».
- Validation personnalisée : La propriété « validator » permet de définir une logique de validation spécifique pour différents fichiers.
React Dropzone est une librairie Drag and Drop gratuite et open source pour React.
React Grid Layout
React Grid Layout est une librairie qui permet de créer des mises en page de grille redimensionnables et déplaçables pour React.
Installation :
npm install react-grid-layout
Pour importer la librairie :
import GridLayout from "react-grid-layout";
Caractéristiques :
- Pas de dépendances externes : React Grid Layout est basé uniquement sur React et n’utilise pas JQuery.
- Widgets redimensionnables : En plus du glisser-déposer, les composants peuvent également être redimensionnés.
- Points d’arrêt réactifs : La librairie permet de définir des mises en page spécifiques pour différents points d’arrêt.
- Personnalisation : L’ajout ou la suppression de widgets peut se faire sans reconstruire toute la grille.
React Grid Layout est une librairie React gratuite et open source.
React Rnd
React Rnd est un composant déplaçable et redimensionnable pour React.
Installation :
npm i -S react-rnd
Ou
yarn add react-rnd
Caractéristiques :
- Simplicité : React Rnd est conçu pour être simple à utiliser tout en restant très puissant.
- Compatibilité avec TypeScript et JavaScript : Cette librairie est compatible aussi bien avec les projets JavaScript que TypeScript.
- Support du redimensionnement : Les composants créés avec React Rnd peuvent être facilement redimensionnés.
React Rnd est une librairie React gratuite et open source.
React Virtualized dnd
React Virtualized dnd est un framework React pour le glisser-déposer qui intègre la virtualisation des barres de défilement.
Installation :
npm install –save react-virtualized-dnd
L’importation de React Virtualized dnd se fait comme suit :
import ExampleBoard from 'react-virtualized-dnd';
Caractéristiques :
- Diversité des composants : Les composants sont classés en « Hauteur fixe », « Hauteur variable » et « Droppables groupables ».
- Personnalisation : Les composants de React Virtualized dnd peuvent être adaptés aux besoins spécifiques du projet.
React Virtualized dnd est un framework React open source dont le code source est hébergé sur GitHub.
React Movable
React Movable est une librairie React pour le glisser-déposer de listes et de tableaux.
Installation :
yarn add react-movable
L’importation de la librairie se fait comme ceci :
import { List, arrayMove } from 'react-movable';
Caractéristiques :
- Diversité des options de glisser-déposer : La librairie offre plusieurs options pour divers types de composants glisser-déposer.
- Libre et légère : React Movable n’a pas de dépendances telles que JQuery et est d’une taille inférieure à 4kB (compressé).
- Style agnostique : React Movable ne contrôle pas le style de l’application, laissant une grande liberté à l’utilisateur.
- Support tactile : Cette librairie permet de développer des applications utilisables sur les smartphones, tablettes et autres appareils tactiles.
- Écrite en TypeScript : L’utilisation de TypeScript permet d’introduire le typage dans le code, ce qui n’est pas possible en JavaScript.
React Movable est une librairie React gratuite et open source.
Draggable
Draggable est une librairie React pour le glisser-déposer qui permet aux développeurs de créer des événements de glisser-déposer en encapsulant les événements natifs du navigateur dans une API simple à utiliser.
Installation :
npm install @shopify/draggable –save
ou via yarn :
yarn add @shopify/draggable
L’importation de Draggable dans une application React se fait de la façon suivante :
import { Draggable } from '@shopify/draggable';
Caractéristiques :
- Composants classés : Les composants sont catégorisés afin de faciliter l’identification du composant exact à utiliser. Ces composants sont également personnalisables.
- Compatibilité avec les principaux navigateurs : Draggable fonctionne avec Google Chrome, Mozilla Firefox et Apple Safari.
- Support de TypeScript : Il est possible d’ajouter des définitions TypeScript lors de l’utilisation de cette librairie.
- Support des plugins : Il est possible d’étendre les fonctionnalités de Draggable à l’aide de plugins tels que Collidable et SwapAnimation.
Draggable est une librairie React gratuite et open source gérée par une communauté de contributeurs.
React drag-to-select
React drag-to-select est une librairie React permettant d’ajouter une fonctionnalité de glisser-sélection à une application.
Installation :
npm install –save @air/react-drag-to-select
Ou
yarn add @air/react-drag-to-select
L’importation de la librairie dans une application se fait ainsi :
import { useSelectionContainer } from '@air/react-drag-to-select'
Caractéristiques :
- Simplicité : Cette librairie ne gère pas la sélection des éléments, mais dessine la boîte de sélection et fournit ses coordonnées.
- Support de TypeScript : React Drag-to-select est écrit en TypeScript, ce qui permet une utilisation dans les projets React JavaScript ou TypeScript.
- Support des tests : La librairie est compatible avec la plupart des frameworks de test React.
React Drag-to-select est une librairie open source gratuite.
React Dragula
React Dragula est une librairie React simple pour le glisser-déposer.
Installation :
npm install react-dragula –save
Ou,
bower install react-dragula –save
Caractéristiques :
- Personnalisation : Les composants de React Dragula peuvent être personnalisés en fonction des besoins spécifiques.
- Support tactile : Cette librairie permet de créer des applications utilisables sur les smartphones, tablettes et autres appareils tactiles.
- Légèreté : React Dragula a une petite taille, ce qui est idéal pour les applications React légères.
React Dragula est une librairie gratuite et open source.
Conclusion
Vous avez maintenant à votre disposition une variété de librairies Drag-and-Drop pour enrichir votre prochaine application React. Le choix de la librairie dépendra des fonctionnalités désirées, de vos préférences personnelles et des spécificités de votre projet.
Dans une application complexe, il est possible d’utiliser plusieurs librairies de glisser-déposer pour répondre à différents besoins. La plupart de ces librairies sont compatibles avec divers frameworks de test React, ce qui facilite la livraison d’applications sans erreurs.