React-Grid-Layout: ein React-Grid mit responsiven Breakpoints und einer v2-TypeScript-API
Ein verschiebbares und in der Größe veränderbares Rasterlayout mit reaktionsfähigen Haltepunkten für React.
Auf einen Blick
- Was ist das?
- Eine zieh- und größenveränderbare Grid-Layout-Bibliothek für React mit responsiven Breakpoints, Hooks und pluggbarer Verdichtung.
- Für wen ist es gedacht?
- Die v2-Neufassung gibt React-Grid-Layout eine typisierte, modulare API mit Hooks und pluggbarer Verdichtung, während ein Kompatibilitätspfad für v1-Nutzer erhalten bleibt. Das Repository ist nicht archiviert und die README lädt zu Issues und Pull Requests ein, verspricht aber keine konkreten Support- oder Wartungszusagen.
- Darf ich es kommerziell nutzen?
- Ja. MIT ist eine freizügige Lizenz: Sie dürfen darauf aufbauende Software nutzen, verändern und verkaufen, solange Sie die Urheberrechts- und Lizenzhinweise beibehalten.
- Wird es noch gepflegt?
- Ja. Die letzten Commits kamen vor 15 Tagen.
- In welcher Sprache ist es geschrieben?
- Hauptsächlich TypeScript, laut der Sprachstatistik von GitHub.
Die Antworten beruhen auf den GitHub-Daten des Projekts (zuletzt abgeglichen am 15. September 2026) und auf unserer Analyse. Sie sind keine Rechtsberatung.
TIEFGEHENDE OPEN-SOURCE-ANALYSE
Was die Bibliothek bietet
React-Grid-Layout ist ein Grid-Layout-System für React, das in der README als ähnlich zu Packery oder Gridster beschrieben wird, sich aber durch responsive Breakpoints unterscheidet. Es ist reines React und benötigt kein jQuery. Die README listet Funktionen wie zieh- und größenveränderbare Widgets, statische Widgets, konfigurierbares Packen (horizontal, vertikal oder aus), Begrenzungsprüfung, serialisierbare Layouts und separate Layouts pro Breakpoint auf. Das Projekt ist in TypeScript geschrieben, und die Repository-Metadaten zeigen 22.372 Sterne und 2.704 Forks.
Die v2-Neufassung und der Migrationspfad
Version 2 ist eine vollständige TypeScript-Neufassung. Sie fügt erstklassige Typen, Hooks wie useContainerWidth, useGridLayout und useResponsiveLayout sowie zusammensetzbare Konfigurationsobjekte für Grid, Drag, Resize, Positionierungsstrategie und Compactor hinzu. Das Paket ist in Einstiegspunkte aufgeteilt: react-grid-layout für Komponenten und Hooks, react-grid-layout/core für reine Layout-Algorithmen, react-grid-layout/legacy für die v1-API und react-grid-layout/extras für optionale Komponenten. Die README dokumentiert Breaking Changes, einschließlich einer erforderlichen width-Prop, einer 3-px-Drag-Schwelle, unveränderlicher Callback-Parameter und der Entfernung des UMD-Bundles. Für eine schnelle Migration bietet der Import von react-grid-layout/legacy 100 % Laufzeit-API-Kompatibilität mit v1.
Responsive Layouts und Messen der Containerbreite
Die Responsive-Komponente behandelt Breakpoints automatisch. Die README zeigt Standard-Breakpoints von lg bis xxs und entsprechende Spaltenanzahlen. Die width-Prop ist erforderlich, und die empfohlene Methode ist der useContainerWidth-Hook, der ResizeObserver verwendet und width, containerRef, mounted und measureWidth zurückgibt. Alternativen sind feste Breite, externe Breitenmessungsbibliotheken oder der ältere WidthProvider-HOC. Das Schnellstartbeispiel in der README demonstriert den Hook mit ReactGridLayout.
Die Hooks-API für benutzerdefinierte Grid-Steuerung
Drei Hooks sind dokumentiert. useContainerWidth misst die Containerbreite. useGridLayout bietet direkte Kontrolle über den Layout-Zustand und Drag-, Resize- und Drop-Ereignisse, einschließlich dragState und isInteracting für benutzerdefinierte Platzhalter. useResponsiveLayout verwaltet Breakpoints und Layout-Generierung und stellt den aktiven Breakpoint, die Spaltenanzahl und Methoden zum Aktualisieren von Layouts pro Breakpoint bereit. Die README enthält Typdefinitionen und Verwendungsbeispiele für jeden Hook und positioniert sie für benutzerdefinierte Grid-Komponenten und Headless-Implementierungen.
Erweiterung durch Compactors und Positionsstrategien
Die Verdichtung ist über ein Compactor-Interface mit type, allowOverlap, preventCollision und einer compact-Methode pluggbar. Eingebaute Compactors sind vertikal, horizontal und noCompactor. Die README zeigt Beispiele für benutzerdefinierte Compactors wie einen Schwerkraft-Compactor und einen einzeiligen Shelf-Compactor und exportiert Hilfsfunktionen wie collides und getStatics aus dem core-Einstiegspunkt. Positionsstrategien steuern die CSS-Positionierung über calcStyle und calcDragPosition; eingebaute Optionen sind transform und absolute sowie createScaledStrategy für skalierte Container. Der extras-Einstiegspunkt bietet GridBackground, einen SVG-Grid-Hintergrund, und schnelle Compactors mit O(n log n) Komplexität, mit Benchmark-Tabellen in der README.
Leistungsrichtlinien und Projektstatus
Die README empfiehlt, Grid-Kinder zu memoizen, da das Grid sie per Referenz vergleicht, und warnt davor, Komponenten während des Renderns zu erstellen, wenn der ältere WidthProvider-HOC verwendet wird. Das Projekt ist unter MIT lizenziert, Copyright Samuel Reed, und der Lizenztext besagt, dass die Software ohne Gewährleistung bereitgestellt wird. Die Repository-Metadaten listen 22.372 Sterne, 2.704 Forks und 80 offene Issues; das Repository ist nicht archiviert. Die README dokumentiert keine Sicherheitsgarantien, Support-Antwortzeiten oder einen Release-Zeitplan.
react-grid-layout: Grenzen im Arbeitsablauf
Bei react-grid-layout/react-grid-layout sollte die technische Entscheidung an einem konkreten Arbeitsablauf geprüft werden. Lege die im README genannten Eingaben in einem kleinen, versionierten Testprojekt an und notiere die erwartete Ausgabe. Bei Create React App gehören dazu npx create-react-app my-app, npm start und npm run build; bei React Hook Form gehören register, handleSubmit und ein Resolver in ein Formular; bei RxDart sind Stream, listen und StreamController die relevanten Lebenszyklusstellen; bei RxJava sind Flowable, subscribeOn und observeOn die entscheidenden Signale. Für andere Projekte bleiben die jeweils dokumentierten Komponenten, Props und Konfigurationsdateien maßgeblich. Beobachte neben dem Erfolgsfall auch leere Eingaben, ungültige Werte, Abbruch und einen erneuten Start. So wird sichtbar, ob Fehler an der Bibliothek, am Adapter oder an der eigenen Integration liegen. Die Prüfung muss mit der tatsächlich verwendeten Version aus package.json, pubspec.yaml oder pom.xml wiederholt werden, weil ein README des Hauptzweigs nicht automatisch dem installierten Paket entspricht. Ein positives Beispiel allein genügt nicht für die Freigabe: Relevant sind auch Bundlegröße, Renderverhalten, Speicherbedarf, Fehlermeldungen und die Bedienbarkeit im vorgesehenen Produkt. Erst wenn diese projektbezogenen Beobachtungen dokumentiert sind, lässt sich der Umfang einer Integration verantwortbar festlegen.
Redaktionelles Fazit
Die v2-Neufassung gibt React-Grid-Layout eine typisierte, modulare API mit Hooks und pluggbarer Verdichtung, während ein Kompatibilitätspfad für v1-Nutzer erhalten bleibt. Das Repository ist nicht archiviert und die README lädt zu Issues und Pull Requests ein, verspricht aber keine konkreten Support- oder Wartungszusagen.
Community-Notizen