Open-Source-Projekt
react-querybuilder/react-querybuilder avatar
react-querybuilder/react-querybuilder

React Query Builder: Komponente, Dienstprogramme und Begleitpakete

Projektüberblick: Die Query Builder-Komponente für React. [!TIP] Um Drag-and-Drop zu aktivieren, verwenden Sie @react-querybuilder/dnd.

1.737 Sterne310 ForksTypeScriptMIT

Auf einen Blick

Was ist das?
Ein TypeScript-Repository für einen anpassbaren React-Query-Builder mit Import und Export für SQL und MongoDB sowie offiziellen Paketen für Stilbibliotheken.
Für wen ist es gedacht?
Die README dokumentiert die Kernkomponente, Begleitpakete und Migrationsleitfäden; die MIT-Lizenz gewährt weitreichende Nutzungsrechte, stellt die Software jedoch ohne Gewährleistung bereit.
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 5 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

Kernkomponente und Dienstprogramme für Abfragesprachen

React Query Builder ist ein einzelnes Repository, das die Haupt-QueryBuilder-React-Komponente und eine Reihe von Dienstprogrammfunktionen enthält. Die Dienstprogramme decken das Importieren von Abfragedefinitionen aus und das Exportieren in mehrere Abfragesprachen ab, einschließlich SQL und MongoDB, wie die README angibt. Die Komponente selbst wird als vollständig anpassbar beschrieben, und von der Dokumentationsseite aus ist eine Live-Demo verlinkt. Das Projekt ist in TypeScript geschrieben, gemäß den Sprachmetadaten des Repositorys. Die README listet nicht jeden Anpassungspunkt auf; diese Details finden sich in der vollständigen Dokumentation unter react-querybuilder.js.org.

Erste Schritte mit der Komponente

Die README zeigt ein minimales Setup: Importieren Sie die QueryBuilder-Komponente und ein Stylesheet, und rendern Sie sie dann mit einem zustandsbehafteten Abfrageobjekt. Das Beispiel verwendet den useState-Hook von React mit einer anfänglichen Abfrage, die einen Combinator von 'and' und ein leeres Regeln-Array hat. Die Komponente erhält die Props defaultQuery und onQueryChange. Das Stylesheet kann als CSS oder SCSS aus 'react-querybuilder/dist/query-builder.css' oder dem entsprechenden .scss importiert werden. Für eine ausführlichere Einführung verweist die README auf die README des Hauptpakets, die vollständige Dokumentation und Beispielprojekte im Repository. Diese Beispielprojekte werden in der README nur in ihrer Existenz erwähnt, nicht weiter beschrieben.

Offizielle Begleitpakete

Über das Hauptpaket hinaus hostet das Repository offizielle Kompatibilitätspakete für mehrere Stilbibliotheken: Ant Design, Bootstrap, Bulma, Chakra UI, Fluent UI, Mantine, MUI, PrimeReact und Tremor. Es gibt auch eine React-Native-Komponente. Zusätzlich werden vier Funktionspakete erwähnt: @react-querybuilder/dnd für Drag-and-Drop, @react-querybuilder/datetime für erweiterte Datums- und Zeitbehandlung, @react-querybuilder/expr zur Aktivierung von Ausdrücken in Regeln und @react-querybuilder/rules-engine für If-Then-Else-Regel-Engine-Funktionalität. Die README gibt keine Installationsbefehle für diese Pakete an; sie identifiziert nur, was sie bieten.

Migrationsleitfäden und Dokumentation

Zwei Migrationsleitfäden werden referenziert: einer für den Wechsel von früheren Versionen von react-querybuilder selbst und ein weiterer für die Migration von react-awesome-query-builder (RAQB). Beide sind auf der Dokumentationsseite gehostet. Die README verlinkt auch auf die vollständige Dokumentation und eine separate Demoseite. Der Hauptzweig des Repositorys heißt main, und das Projekt ist laut Metadaten nicht archiviert. In der README werden keine Informationen zu Versionshistorie oder Versionsnummern bereitgestellt.

Entwicklung, Beitrag und Repository-Zustand

Die README verweist für Entwicklungsrichtlinien auf eine CONTRIBUTING.md-Datei. Der Beitragendenabschnitt folgt der all-contributors-Spezifikation, und das Abzeichen zeigt 48 Beitragende. Die Repository-Metadaten verzeichnen 1.711 Sterne, 312 Forks und 9 offene Issues. Das Projekt ist nicht archiviert. Die README besagt, dass Beiträge jeder Art willkommen sind, und die Beitragendentabelle listet Einzelpersonen und ihre Beiträge auf, wird hier jedoch nicht reproduziert. Der Entwicklungsprozess selbst wird über den Link zu den Beitragsrichtlinien hinaus nicht beschrieben.

Lizenz und Inspirationen

Die README der Komponente nennt jQuery QueryBuilder, Angular QueryBuilder und React Awesome Query Builder als Inspiration. Die Software ist unter der MIT-Lizenz lizenziert, wobei das Urheberrecht bei Jake Boone und anderen Beitragenden liegt. Die Lizenz gewährt das Recht, Kopien der Software zu verwenden, zu kopieren, zu modifizieren, zu verschmelzen, zu veröffentlichen, zu verteilen, zu unterlizenzieren und zu verkaufen, sofern der obige Urheberrechtshinweis und der Genehmigungshinweis in allen Kopien oder wesentlichen Teilen enthalten sind. Die Software wird 'wie sie ist' ohne jegliche Gewährleistung bereitgestellt, und die Autoren haften nicht für Ansprüche oder Schäden. Der Lizenztext befasst sich nicht mit Sicherheit, Support oder Wartungszusagen.

react-querybuilder: Grenzen im Arbeitsablauf

Bei react-querybuilder/react-querybuilder 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 README dokumentiert die Kernkomponente, Begleitpakete und Migrationsleitfäden; die MIT-Lizenz gewährt weitreichende Nutzungsrechte, stellt die Software jedoch ohne Gewährleistung bereit.

Offizielle Quellen

  1. Official documentation
  2. Official README
  3. Project repository
  4. Release notes
Community-Notizen

Community-Notizen