react-draggable vs react-resizable vs react-grid-layout | Comparaison des packages npm "Bibliothèques de Glisser-Déposer pour React"

Package	Téléchargements	Stars	Taille	Issues	Publication	Licence

react-draggable	2,902,696	9,231	243 kB	243	il y a 2 mois	MIT
react-resizable	1,369,637	2,534	116 kB	78	il y a 2 ans	MIT
react-grid-layout	961,721	21,500	508 kB	241	il y a 2 mois	MIT

Package

Téléchargements

Stars

Taille

Issues

Publication

Licence

react-draggable

2,902,696

9,231

243 kB

243

il y a 2 mois

MIT

react-resizable

1,369,637

2,534

116 kB

il y a 2 ans

MIT

react-grid-layout

961,721

21,500

508 kB

241

il y a 2 mois

MIT

Fonctionnalité de Glisser-Déposer

react-draggable:
react-draggable fournit une fonctionnalité de glisser-déposer simple pour les éléments. Il permet aux utilisateurs de faire glisser un élément dans n'importe quelle direction, et vous pouvez suivre sa position à l'aide d'événements de rappel.
react-resizable:
react-resizable ne fournit pas de fonctionnalité de glisser-déposer par lui-même, mais il permet aux utilisateurs de redimensionner les éléments en faisant glisser des poignées. Cela ajoute une interactivité supplémentaire, mais ne remplace pas le glisser-déposer.
react-grid-layout:
react-grid-layout intègre le glisser-déposer dans une mise en page de grille. Les utilisateurs peuvent faire glisser des éléments d'une cellule de la grille à une autre, et la bibliothèque gère automatiquement la réorganisation et le redimensionnement des éléments.

Mise en Page de Grille

react-draggable:
react-draggable ne gère pas les mises en page de grille. Il s'agit simplement de rendre les éléments déplaçables sans aucune structure de grille.
react-resizable:
react-resizable ne fournit pas de mise en page de grille. Il se concentre uniquement sur le redimensionnement des éléments, qui peut être appliqué à n'importe quel type de mise en page.
react-grid-layout:
react-grid-layout est conçu autour du concept de grille. Il permet aux éléments d'être placés dans une grille, ce qui facilite l'organisation et le redimensionnement des éléments de manière structurée.

Redimensionnement

react-draggable:
react-draggable ne prend pas en charge le redimensionnement. Il se concentre uniquement sur le déplacement des éléments.
react-resizable:
react-resizable est entièrement dédié au redimensionnement. Il permet aux utilisateurs de redimensionner les éléments en faisant glisser des poignées, et il offre une personnalisation complète des poignées de redimensionnement.
react-grid-layout:
react-grid-layout prend en charge le redimensionnement des éléments de la grille. Les utilisateurs peuvent redimensionner les éléments en faisant glisser leurs bords, ce qui ajoute une couche de flexibilité à la mise en page.

Personnalisation

react-draggable:
react-draggable offre une personnalisation limitée des éléments déplaçables. Vous pouvez modifier leur apparence et leur comportement, mais la bibliothèque reste simple et légère.
react-resizable:
react-resizable permet de personnaliser les poignées de redimensionnement et le comportement des éléments redimensionnables. Vous pouvez créer des poignées de redimensionnement personnalisées et contrôler la taille minimale et maximale des éléments.
react-grid-layout:
react-grid-layout permet une personnalisation approfondie des éléments de la grille, y compris leur taille, leur position et leur comportement de redimensionnement. Cela en fait un choix flexible pour les interfaces complexes.

Exemple de Code

react-draggable:

Exemple de Glisser-Déposer avec react-draggable

import React from 'react';
import Draggable from 'react-draggable';

function DraggableComponent() {
  return (
    <Draggable>
      <div style={{ width: 100, height: 100, backgroundColor: 'lightblue' }}>
        Faites-moi glisser
      </div>
    </Draggable>
  );
}

export default DraggableComponent;

react-resizable:

Exemple de Redimensionnement avec react-resizable

import React from 'react';
import { ResizableBox } from 'react-resizable';
import 'react-resizable/css/styles.css';

function ResizableComponent() {
  return (
    <ResizableBox width={200} height={200} minConstraints={[100, 100]} maxConstraints={[300, 300]}>
      <div style={{ background: 'lightblue', width: '100%', height: '100%' }}>
        Redimensionnez-moi
      </div>
    </ResizableBox>
  );
}

export default ResizableComponent;

react-grid-layout:

Exemple de Grille Réactive avec react-grid-layout

import React from 'react';
import { WidthProvider, Responsive } from 'react-grid-layout';

const ResponsiveGridLayout = WidthProvider(Responsive);

function GridLayout() {
  const layout = [
    { i: 'a', x: 0, y: 0, w: 1, h: 2 },
    { i: 'b', x: 1, y: 0, w: 1, h: 2 },
    { i: 'c', x: 0, y: 2, w: 2, h: 1 },
  ];

  return (
    <ResponsiveGridLayout layout={layout} cols={{ lg: 2 }} rowHeight={30}>
      <div key="a" style={{ background: 'lightcoral' }}>A</div>
      <div key="b" style={{ background: 'lightgreen' }}>B</div>
      <div key="c" style={{ background: 'lightblue' }}>C</div>
    </ResponsiveGridLayout>
  );
}

export default GridLayout;