React-Grid-Layout v2 : une grille pilotée par TypeScript
Une disposition de grille déplaçable et redimensionnable avec des points d'arrêt réactifs, pour React.
En bref
- De quoi s’agit-il ?
- Déplacement, redimensionnement, points de rupture et migration depuis l’API v1
- À qui s’adresse-t-il ?
- react-grid-layout convient à une équipe dont le besoin correspond aux capacités décrites dans react-grid-layout/react-grid-layout et qui peut exécuter npm install puis npm test. Il convient moins à un contexte exigeant des garanties absentes du README.
- Puis-je l’utiliser commercialement ?
- Oui. MIT est une licence permissive : vous pouvez utiliser, modifier et vendre un logiciel qui en dépend, à condition de conserver les mentions de droit d’auteur et de licence.
- Est-il encore maintenu ?
- Oui. Les derniers commits datent d’il y a 15 jours.
- En quel langage est-il écrit ?
- Principalement TypeScript, d’après les statistiques de langage de GitHub.
Ces réponses reposent sur les données GitHub du projet (dernière synchronisation le 15 septembre 2026) et sur notre analyse. Elles ne constituent pas un avis juridique.
ANALYSE OPEN SOURCE APPROFONDIE
Le périmètre annoncé par le README de react-grid-layout
React-Grid-Layout est un système de mise en page en grille pour React, décrit dans le README comme similaire à Packery ou Gridster, mais avec des points de rupture réactifs. Il est uniquement React et ne nécessite pas jQuery. Le README liste des fonctionnalités telles que des widgets déplaçables et redimensionnables, des widgets statiques, un compactage configurable (horizontal, vertical ou désactivé), la vérification des limites, des mises en page sérialisables et des mises en page distinctes par point de rupture. Le projet est écrit en TypeScript et les métadonnées du dépôt montrent 22 372 étoiles et 2 704 forks. React-Grid-Layout [](https://www.npmjs.org/package/react-grid-layout) []() React-Grid-Layout is a grid layout system much like [Packery](http://packery.metafizzy.co/) or [Gridster](http://dsmorse.github.io/gridster.js/), for React. Unlike those systems, it is responsive and supports breakpoints. Breakpoint layouts can be provided by the user or autogenerated. RGL is React-only . Dans react-grid-layout/react-grid-layout, ce point doit être lu avec les noms propres du projet et sa structure publiée. Pour vérifier react-grid-layout, exécutez npm install puis npm test, puis observez le résultat produit par l’exemple correspondant dans le README. La documentation ne permet pas d’inférer un comportement que ce test ne montre pas.
React-Grid-Layout est un système de mise en page en grille pour React, décrit dans le README comme similaire à Packery ou Gridster, mais avec des points de rupture réactifs. Il est uniquement React et ne nécessite pas jQuery. Le README liste des fonctionnalités telles que des widgets déplaçables et redimensionnables, des widgets statiques, un compactage configurable (horizontal, vertical ou désactivé), la vérification des limites, des mises en page sérialisables et des mises en page distinctes par point de rupture. Le projet est écrit en TypeScript et les métadonnées du dépôt montrent 22 372 étoiles et 2 704 forks. React-Grid-Layout [](https://www.npmjs.org/package/react-grid-layout) []() React-Grid-Layout is a grid layout system much like [Packery](http://packery.metafizzy.co/) or [Gridster](http://dsmorse.github.io/gridster.js/), for React. Unlike those systems, it is responsive and supports breakpoints. Breakpoint layouts can be provided by the user or autogenerated. RGL is React-only . Dans react-grid-layout/react-grid-layout, ce point doit être lu avec les noms propres du projet et sa structure publiée. Une seconde vérification de react-grid-layout, exécutez npm install puis npm test, puis observez le résultat produit par l’exemple correspondant dans le README. La documentation ne permet pas d’inférer un comportement que ce test ne montre pas.
Les types et fichiers qui portent le projet de react-grid-layout
La version 2 est une réécriture complète en TypeScript. Elle ajoute des types de première classe, des hooks tels que useContainerWidth, useGridLayout et useResponsiveLayout, et des objets de configuration composables pour la grille, le glisser, le redimensionnement, la stratégie de positionnement et le compacteur. Le paquet est divisé en points d'entrée : react-grid-layout pour les composants et hooks, react-grid-layout/core pour les algorithmes de mise en page purs, react-grid-layout/legacy pour l'API v1, et react-grid-layout/extras pour les composants optionnels. Le README documente les changements cassants, notamment une prop width obligatoire, un seuil de glisser de 3 px, des paramètres de callback immuables et la suppression du bundle UMD. Pour une migration rapide, importer depuis react-grid-layout/legacy fournit une compatibilité API runtime à 100 % avec v1. grid layout system much like [Packery](http://packery.metafizzy.co/) or [Gridster](http://dsmorse.github.io/gridster.js/), for React. Unlike those systems, it is responsive and supports breakpoints. Breakpoint layouts can be provided by the user or autogenerated. RGL is React-only and does not require jQuery. > GIF from production usage on [BitMEX.com](https://www.bitmex.com) . Dans react-grid-layout/react-grid-layout, ce point doit être lu avec les noms propres du projet et sa structure publiée. Pour vérifier react-grid-layout, exécutez npm install puis npm test, puis observez les erreurs, les sorties et les fichiers de configuration concernés. La documentation ne permet pas d’inférer un comportement que ce test ne montre pas.
La version 2 est une réécriture complète en TypeScript. Elle ajoute des types de première classe, des hooks tels que useContainerWidth, useGridLayout et useResponsiveLayout, et des objets de configuration composables pour la grille, le glisser, le redimensionnement, la stratégie de positionnement et le compacteur. Le paquet est divisé en points d'entrée : react-grid-layout pour les composants et hooks, react-grid-layout/core pour les algorithmes de mise en page purs, react-grid-layout/legacy pour l'API v1, et react-grid-layout/extras pour les composants optionnels. Le README documente les changements cassants, notamment une prop width obligatoire, un seuil de glisser de 3 px, des paramètres de callback immuables et la suppression du bundle UMD. Pour une migration rapide, importer depuis react-grid-layout/legacy fournit une compatibilité API runtime à 100 % avec v1. grid layout system much like [Packery](http://packery.metafizzy.co/) or [Gridster](http://dsmorse.github.io/gridster.js/), for React. Unlike those systems, it is responsive and supports breakpoints. Breakpoint layouts can be provided by the user or autogenerated. RGL is React-only and does not require jQuery. > GIF from production usage on [BitMEX.com](https://www.bitmex.com) . Dans react-grid-layout/react-grid-layout, ce point doit être lu avec les noms propres du projet et sa structure publiée. Une seconde vérification de react-grid-layout, exécutez npm install puis npm test, puis observez les erreurs, les sorties et les fichiers de configuration concernés. La documentation ne permet pas d’inférer un comportement que ce test ne montre pas.
Le parcours de démarrage documenté de react-grid-layout
Le composant Responsive gère automatiquement les points de rupture. Le README montre les points de rupture par défaut de lg à xxs et les nombres de colonnes correspondants. La prop width est obligatoire, et la méthode recommandée est le hook useContainerWidth, qui utilise ResizeObserver et retourne width, containerRef, mounted et measureWidth. Les alternatives incluent une largeur fixe, des bibliothèques de mesure de largeur externes ou le HOC WidthProvider hérité. L'exemple de démarrage rapide du README démontre le hook avec ReactGridLayout. e.github.io/gridster.js/), for React. Unlike those systems, it is responsive and supports breakpoints. Breakpoint layouts can be provided by the user or autogenerated. RGL is React-only and does not require jQuery. > GIF from production usage on [BitMEX.com](https://www.bitmex.com) [[Demo](https://react-grid-layout.github.io/react-grid-layout/) | [Changelog](/CHANGELOG.md) | [C. Dans react-grid-layout/react-grid-layout, ce point doit être lu avec les noms propres du projet et sa structure publiée. Pour vérifier react-grid-layout, exécutez npm install puis npm test, puis observez le résultat produit par l’exemple correspondant dans le README. La documentation ne permet pas d’inférer un comportement que ce test ne montre pas.
Le composant Responsive gère automatiquement les points de rupture. Le README montre les points de rupture par défaut de lg à xxs et les nombres de colonnes correspondants. La prop width est obligatoire, et la méthode recommandée est le hook useContainerWidth, qui utilise ResizeObserver et retourne width, containerRef, mounted et measureWidth. Les alternatives incluent une largeur fixe, des bibliothèques de mesure de largeur externes ou le HOC WidthProvider hérité. L'exemple de démarrage rapide du README démontre le hook avec ReactGridLayout. e.github.io/gridster.js/), for React. Unlike those systems, it is responsive and supports breakpoints. Breakpoint layouts can be provided by the user or autogenerated. RGL is React-only and does not require jQuery. > GIF from production usage on [BitMEX.com](https://www.bitmex.com) [[Demo](https://react-grid-layout.github.io/react-grid-layout/) | [Changelog](/CHANGELOG.md) | [C. Dans react-grid-layout/react-grid-layout, ce point doit être lu avec les noms propres du projet et sa structure publiée. Une seconde vérification de react-grid-layout, exécutez npm install puis npm test, puis observez le résultat produit par l’exemple correspondant dans le README. La documentation ne permet pas d’inférer un comportement que ce test ne montre pas.
Le point technique qui demande une mesure de react-grid-layout
Trois hooks sont documentés. useContainerWidth mesure la largeur du conteneur. useGridLayout donne un contrôle direct sur l'état de la mise en page et les événements de glisser, redimensionner et déposer, y compris dragState et isInteracting pour les exemple de remplacements personnalisés. useResponsiveLayout gère les points de rupture et la génération de mises en page, exposant le point de rupture actif, le nombre de colonnes et des méthodes pour mettre à jour les mises en page par point de rupture. Le README fournit des définitions de types et des exemples d'utilisation pour chaque hook, les positionnant pour des composants de grille personnalisés et des implémentations sans tête. ints. Breakpoint layouts can be provided by the user or autogenerated. RGL is React-only and does not require jQuery. > GIF from production usage on [BitMEX.com](https://www.bitmex.com) [[Demo](https://react-grid-layout.github.io/react-grid-layout/) | [Changelog](/CHANGELOG.md) | [CodeSandbox Editable demo](https://codesandbox.io/p/sandbox/5ywf7c)] Table of Contents - [What's N. Dans react-grid-layout/react-grid-layout, ce point doit être lu avec les noms propres du projet et sa structure publiée. Pour vérifier react-grid-layout, exécutez npm install puis npm test, puis observez les erreurs, les sorties et les fichiers de configuration concernés. La documentation ne permet pas d’inférer un comportement que ce test ne montre pas.
Trois hooks sont documentés. useContainerWidth mesure la largeur du conteneur. useGridLayout donne un contrôle direct sur l'état de la mise en page et les événements de glisser, redimensionner et déposer, y compris dragState et isInteracting pour les exemple de remplacements personnalisés. useResponsiveLayout gère les points de rupture et la génération de mises en page, exposant le point de rupture actif, le nombre de colonnes et des méthodes pour mettre à jour les mises en page par point de rupture. Le README fournit des définitions de types et des exemples d'utilisation pour chaque hook, les positionnant pour des composants de grille personnalisés et des implémentations sans tête. ints. Breakpoint layouts can be provided by the user or autogenerated. RGL is React-only and does not require jQuery. > GIF from production usage on [BitMEX.com](https://www.bitmex.com) [[Demo](https://react-grid-layout.github.io/react-grid-layout/) | [Changelog](/CHANGELOG.md) | [CodeSandbox Editable demo](https://codesandbox.io/p/sandbox/5ywf7c)] Table of Contents - [What's N. Dans react-grid-layout/react-grid-layout, ce point doit être lu avec les noms propres du projet et sa structure publiée. Une seconde vérification de react-grid-layout, exécutez npm install puis npm test, puis observez les erreurs, les sorties et les fichiers de configuration concernés. La documentation ne permet pas d’inférer un comportement que ce test ne montre pas.
Les limites à inscrire dans le choix de react-grid-layout
La compaction est enfichable via une interface Compactor avec type, allowOverlap, preventCollision et une méthode compact. Les compacteurs intégrés incluent vertical, horizontal et noCompactor. Le README montre des exemples de compacteurs personnalisés, comme un compacteur à gravité et un compacteur de tablette à une seule rangée, et exporte des fonctions d'aide comme collides et getStatics depuis le point d'entrée core. Les stratégies de positionnement contrôlent le positionnement CSS via calcStyle et calcDragPosition ; les options intégrées incluent transform et absolute, ainsi que createScaledStrategy pour les conteneurs mis à l'échelle. Le point d'entrée extras fournit GridBackground, un fond de grille SVG, et des compacteurs rapides avec une complexité O(n log n), avec des tableaux de référence dans le README. not require jQuery. > GIF from production usage on [BitMEX.com](https://www.bitmex.com) [[Demo](https://react-grid-layout.github.io/react-grid-layout/) | [Changelog](/CHANGELOG.md) | [CodeSandbox Editable demo](https://codesandbox.io/p/sandbox/5ywf7c)] Table of Contents - [What's New in v2](whats-new-in-v2) - [Migrating from v1](migrating-from-v1) - [Demos](demos) - [Features]. Dans react-grid-layout/react-grid-layout, ce point doit être lu avec les noms propres du projet et sa structure publiée. Pour vérifier react-grid-layout, exécutez npm install puis npm test, puis observez le résultat produit par l’exemple correspondant dans le README. La documentation ne permet pas d’inférer un comportement que ce test ne montre pas.
La compaction est enfichable via une interface Compactor avec type, allowOverlap, preventCollision et une méthode compact. Les compacteurs intégrés incluent vertical, horizontal et noCompactor. Le README montre des exemples de compacteurs personnalisés, comme un compacteur à gravité et un compacteur de tablette à une seule rangée, et exporte des fonctions d'aide comme collides et getStatics depuis le point d'entrée core. Les stratégies de positionnement contrôlent le positionnement CSS via calcStyle et calcDragPosition ; les options intégrées incluent transform et absolute, ainsi que createScaledStrategy pour les conteneurs mis à l'échelle. Le point d'entrée extras fournit GridBackground, un fond de grille SVG, et des compacteurs rapides avec une complexité O(n log n), avec des tableaux de référence dans le README. not require jQuery. > GIF from production usage on [BitMEX.com](https://www.bitmex.com) [[Demo](https://react-grid-layout.github.io/react-grid-layout/) | [Changelog](/CHANGELOG.md) | [CodeSandbox Editable demo](https://codesandbox.io/p/sandbox/5ywf7c)] Table of Contents - [What's New in v2](whats-new-in-v2) - [Migrating from v1](migrating-from-v1) - [Demos](demos) - [Features]. Dans react-grid-layout/react-grid-layout, ce point doit être lu avec les noms propres du projet et sa structure publiée. Une seconde vérification de react-grid-layout, exécutez npm install puis npm test, puis observez le résultat produit par l’exemple correspondant dans le README. La documentation ne permet pas d’inférer un comportement que ce test ne montre pas.
À qui le dépôt peut convenir de react-grid-layout
Le README recommande de mémoriser les enfants de la grille car la grille les compare par référence, et avertit de ne pas créer de composants pendant le rendu lors de l'utilisation du HOC WidthProvider hérité. Le projet est sous licence MIT, copyright Samuel Reed, et le texte de licence indique que le logiciel est fourni « tel quel » sans garantie. Les métadonnées du dépôt listent 22 372 étoiles, 2 704 forks et 80 problèmes ouverts ; le dépôt n'est pas archivé. Le README ne documente pas de garanties de sécurité, de délais de réponse de support ou de calendrier de publication. https://react-grid-layout.github.io/react-grid-layout/) | [Changelog](/CHANGELOG.md) | [CodeSandbox Editable demo](https://codesandbox.io/p/sandbox/5ywf7c)] Table of Contents - [What's New in v2](whats-new-in-v2) - [Migrating from v1](migrating-from-v1) - [Demos](demos) - [Features](features) - [Installation](installation) - [Quick Start](quick-start) - [Responsive Usage](respo. Dans react-grid-layout/react-grid-layout, ce point doit être lu avec les noms propres du projet et sa structure publiée. Pour vérifier react-grid-layout, exécutez npm install puis npm test, puis observez les erreurs, les sorties et les fichiers de configuration concernés. La documentation ne permet pas d’inférer un comportement que ce test ne montre pas.
Le README recommande de mémoriser les enfants de la grille car la grille les compare par référence, et avertit de ne pas créer de composants pendant le rendu lors de l'utilisation du HOC WidthProvider hérité. Le projet est sous licence MIT, copyright Samuel Reed, et le texte de licence indique que le logiciel est fourni « tel quel » sans garantie. Les métadonnées du dépôt listent 22 372 étoiles, 2 704 forks et 80 problèmes ouverts ; le dépôt n'est pas archivé. Le README ne documente pas de garanties de sécurité, de délais de réponse de support ou de calendrier de publication. https://react-grid-layout.github.io/react-grid-layout/) | [Changelog](/CHANGELOG.md) | [CodeSandbox Editable demo](https://codesandbox.io/p/sandbox/5ywf7c)] Table of Contents - [What's New in v2](whats-new-in-v2) - [Migrating from v1](migrating-from-v1) - [Demos](demos) - [Features](features) - [Installation](installation) - [Quick Start](quick-start) - [Responsive Usage](respo. Dans react-grid-layout/react-grid-layout, ce point doit être lu avec les noms propres du projet et sa structure publiée. Une seconde vérification de react-grid-layout, exécutez npm install puis npm test, puis observez les erreurs, les sorties et les fichiers de configuration concernés. La documentation ne permet pas d’inférer un comportement que ce test ne montre pas.
Conclusion éditoriale
react-grid-layout convient à une équipe dont le besoin correspond aux capacités décrites dans react-grid-layout/react-grid-layout et qui peut exécuter npm install puis npm test. Il convient moins à un contexte exigeant des garanties absentes du README. Commencez par ce parcours, fixez la version examinée, puis contrôlez les sorties, erreurs et fichiers propres au projet avant de l’intégrer.
Notes de la communauté