React Query Builder : construire des filtres structurés
Aperçu du projet : Le composant Query Builder pour React. [!TIP] Pour activer le glisser-déposer, utilisez @react-querybuilder/dnd.
En bref
- De quoi s’agit-il ?
- Composants de requête, formats de sortie, opérateurs et intégration avec React
- À qui s’adresse-t-il ?
- react-querybuilder convient à une équipe dont le besoin correspond aux capacités décrites dans react-querybuilder/react-querybuilder 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 5 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-querybuilder
React Query Builder est un dépôt unique qui fournit le composant React QueryBuilder principal et un ensemble de fonctions utilitaires. Les utilitaires couvrent l'importation de définitions de requêtes depuis et l'exportation vers plusieurs langages de requête, notamment SQL et MongoDB, comme l'indique le README. Le composant lui-même est décrit comme entièrement personnalisable, et une démo en direct est liée depuis le site de documentation. Le projet est écrit en TypeScript, selon les métadonnées de langue du dépôt. Le README n'énumère pas chaque point de personnalisation ; ces détails se trouvent dans la documentation complète sur react-querybuilder.js.org. React Query Builder [![npm][badge-npm]](https://www.npmjs.com/package/react-querybuilder) [![Demo][badge-demo]](https://react-querybuilder.js.org/demo) [![Docs][badge-docs]](https://react-querybuilder.js.org/) [![Learn from the maintainer][badge-training]](https://www.newline.co/courses/building-advanced-admin-reporting-in-react) [![Chat][badge-discord]](https://react-querybuil. Dans react-querybuilder/react-querybuilder, ce point doit être lu avec les noms propres du projet et sa structure publiée. Pour vérifier react-querybuilder, 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 Query Builder est un dépôt unique qui fournit le composant React QueryBuilder principal et un ensemble de fonctions utilitaires. Les utilitaires couvrent l'importation de définitions de requêtes depuis et l'exportation vers plusieurs langages de requête, notamment SQL et MongoDB, comme l'indique le README. Le composant lui-même est décrit comme entièrement personnalisable, et une démo en direct est liée depuis le site de documentation. Le projet est écrit en TypeScript, selon les métadonnées de langue du dépôt. Le README n'énumère pas chaque point de personnalisation ; ces détails se trouvent dans la documentation complète sur react-querybuilder.js.org. React Query Builder [![npm][badge-npm]](https://www.npmjs.com/package/react-querybuilder) [![Demo][badge-demo]](https://react-querybuilder.js.org/demo) [![Docs][badge-docs]](https://react-querybuilder.js.org/) [![Learn from the maintainer][badge-training]](https://www.newline.co/courses/building-advanced-admin-reporting-in-react) [![Chat][badge-discord]](https://react-querybuil. Dans react-querybuilder/react-querybuilder, ce point doit être lu avec les noms propres du projet et sa structure publiée. Une seconde vérification de react-querybuilder, 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-querybuilder
Le README montre une configuration minimale : importez le composant QueryBuilder et une feuille de style, puis rendez-le avec un objet de requête avec état. L'exemple utilise le hook useState de React avec une requête initiale qui a un combinatoire de 'and' et un tableau de règles vide. Le composant reçoit les propriétés defaultQuery et onQueryChange. La feuille de style peut être importée en CSS ou SCSS depuis 'react-querybuilder/dist/query-builder.css' ou l'équivalent .scss. Pour une introduction plus complète, le README pointe vers le README du paquet principal, la documentation complète et les projets d'exemple dans le dépôt. Ces projets d'exemple ne sont mentionnés dans le README que par leur existence, sans autre description. ][badge-demo]](https://react-querybuilder.js.org/demo) [![Docs][badge-docs]](https://react-querybuilder.js.org/) [![Learn from the maintainer][badge-training]](https://www.newline.co/courses/building-advanced-admin-reporting-in-react) [![Chat][badge-discord]](https://react-querybuilder.js.org/discord) [![CI][badge-ci]](https://github.com/react-querybuilder/react-querybuilder/ac. Dans react-querybuilder/react-querybuilder, ce point doit être lu avec les noms propres du projet et sa structure publiée. Pour vérifier react-querybuilder, 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 montre une configuration minimale : importez le composant QueryBuilder et une feuille de style, puis rendez-le avec un objet de requête avec état. L'exemple utilise le hook useState de React avec une requête initiale qui a un combinatoire de 'and' et un tableau de règles vide. Le composant reçoit les propriétés defaultQuery et onQueryChange. La feuille de style peut être importée en CSS ou SCSS depuis 'react-querybuilder/dist/query-builder.css' ou l'équivalent .scss. Pour une introduction plus complète, le README pointe vers le README du paquet principal, la documentation complète et les projets d'exemple dans le dépôt. Ces projets d'exemple ne sont mentionnés dans le README que par leur existence, sans autre description. ][badge-demo]](https://react-querybuilder.js.org/demo) [![Docs][badge-docs]](https://react-querybuilder.js.org/) [![Learn from the maintainer][badge-training]](https://www.newline.co/courses/building-advanced-admin-reporting-in-react) [![Chat][badge-discord]](https://react-querybuilder.js.org/discord) [![CI][badge-ci]](https://github.com/react-querybuilder/react-querybuilder/ac. Dans react-querybuilder/react-querybuilder, ce point doit être lu avec les noms propres du projet et sa structure publiée. Une seconde vérification de react-querybuilder, 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-querybuilder
En plus du paquet principal, le dépôt héberge des paquets de compatibilité officiels pour plusieurs bibliothèques de style : Ant Design, Bootstrap, Bulma, Chakra UI, Fluent UI, Mantine, MUI, PrimeReact et Tremor. Il y a aussi un composant React Native. aussi, quatre paquets de fonctionnalités sont mentionnés : @react-querybuilder/dnd pour le glisser-déposer, @react-querybuilder/datetime pour la gestion avancée des dates et heures, @react-querybuilder/expr pour activer les expressions dans les règles, et @react-querybuilder/rules-engine pour la fonctionnalité de moteur de règles if-then-else. Le README ne donne aucune commande d'installation pour ces paquets ; il identifie seulement ce qu'ils fournissent. uilder.js.org/) [![Learn from the maintainer][badge-training]](https://www.newline.co/courses/building-advanced-admin-reporting-in-react) [![Chat][badge-discord]](https://react-querybuilder.js.org/discord) [![CI][badge-ci]](https://github.com/react-querybuilder/react-querybuilder/actions/workflows/main.yml) [![codecov.io][badge-codecov]][codecov-link] [![All Contributors][badge. Dans react-querybuilder/react-querybuilder, ce point doit être lu avec les noms propres du projet et sa structure publiée. Pour vérifier react-querybuilder, 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.
En plus du paquet principal, le dépôt héberge des paquets de compatibilité officiels pour plusieurs bibliothèques de style : Ant Design, Bootstrap, Bulma, Chakra UI, Fluent UI, Mantine, MUI, PrimeReact et Tremor. Il y a aussi un composant React Native. aussi, quatre paquets de fonctionnalités sont mentionnés : @react-querybuilder/dnd pour le glisser-déposer, @react-querybuilder/datetime pour la gestion avancée des dates et heures, @react-querybuilder/expr pour activer les expressions dans les règles, et @react-querybuilder/rules-engine pour la fonctionnalité de moteur de règles if-then-else. Le README ne donne aucune commande d'installation pour ces paquets ; il identifie seulement ce qu'ils fournissent. uilder.js.org/) [![Learn from the maintainer][badge-training]](https://www.newline.co/courses/building-advanced-admin-reporting-in-react) [![Chat][badge-discord]](https://react-querybuilder.js.org/discord) [![CI][badge-ci]](https://github.com/react-querybuilder/react-querybuilder/actions/workflows/main.yml) [![codecov.io][badge-codecov]][codecov-link] [![All Contributors][badge. Dans react-querybuilder/react-querybuilder, ce point doit être lu avec les noms propres du projet et sa structure publiée. Une seconde vérification de react-querybuilder, 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-querybuilder
Deux guides de migration sont référencés : un pour passer des versions antérieures de react-querybuilder lui-même, et un autre pour migrer depuis react-awesome-query-builder (RAQB). Les deux sont hébergés sur le site de documentation. Le README fournit également des liens vers la documentation complète et une page de démo séparée. La branche principale du dépôt est nommée main, et le projet n'est pas archivé selon les métadonnées. Aucune information sur l'historique des versions ou les numéros de version n'est fournie dans le README. lding-advanced-admin-reporting-in-react) [![Chat][badge-discord]](https://react-querybuilder.js.org/discord) [![CI][badge-ci]](https://github.com/react-querybuilder/react-querybuilder/actions/workflows/main.yml) [![codecov.io][badge-codecov]][codecov-link] [![All Contributors][badge-all-contributors]](contributors-) [![pkg.pr.new][badge-pkg-pr-new]][pkg-pr-new-link] React Query. Dans react-querybuilder/react-querybuilder, ce point doit être lu avec les noms propres du projet et sa structure publiée. Pour vérifier react-querybuilder, 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.
Deux guides de migration sont référencés : un pour passer des versions antérieures de react-querybuilder lui-même, et un autre pour migrer depuis react-awesome-query-builder (RAQB). Les deux sont hébergés sur le site de documentation. Le README fournit également des liens vers la documentation complète et une page de démo séparée. La branche principale du dépôt est nommée main, et le projet n'est pas archivé selon les métadonnées. Aucune information sur l'historique des versions ou les numéros de version n'est fournie dans le README. lding-advanced-admin-reporting-in-react) [![Chat][badge-discord]](https://react-querybuilder.js.org/discord) [![CI][badge-ci]](https://github.com/react-querybuilder/react-querybuilder/actions/workflows/main.yml) [![codecov.io][badge-codecov]][codecov-link] [![All Contributors][badge-all-contributors]](contributors-) [![pkg.pr.new][badge-pkg-pr-new]][pkg-pr-new-link] React Query. Dans react-querybuilder/react-querybuilder, ce point doit être lu avec les noms propres du projet et sa structure publiée. Une seconde vérification de react-querybuilder, 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-querybuilder
Le README pointe vers un fichier CONTRIBUTING.md pour les directives de développement. La section des contributeurs suit la spécification all-contributors et le badge indique 48 contributeurs. Les métadonnées du dépôt enregistrent 1 711 étoiles, 312 forks et 9 problèmes ouverts. Le projet n'est pas archivé. Le README déclare que les contributions de toute nature sont les bienvenues, et le tableau des contributeurs liste les individus et leurs contributions, bien que ce tableau ne soit pas reproduit ici. Le processus de développement lui-même n'est pas décrit au-delà du lien vers les directives de contribution. rg/discord) [![CI][badge-ci]](https://github.com/react-querybuilder/react-querybuilder/actions/workflows/main.yml) [![codecov.io][badge-codecov]][codecov-link] [![All Contributors][badge-all-contributors]](contributors-) [![pkg.pr.new][badge-pkg-pr-new]][pkg-pr-new-link] React Query Builder is a fully customizable query builder component for React, along with a collection of ut. Dans react-querybuilder/react-querybuilder, ce point doit être lu avec les noms propres du projet et sa structure publiée. Pour vérifier react-querybuilder, 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 README pointe vers un fichier CONTRIBUTING.md pour les directives de développement. La section des contributeurs suit la spécification all-contributors et le badge indique 48 contributeurs. Les métadonnées du dépôt enregistrent 1 711 étoiles, 312 forks et 9 problèmes ouverts. Le projet n'est pas archivé. Le README déclare que les contributions de toute nature sont les bienvenues, et le tableau des contributeurs liste les individus et leurs contributions, bien que ce tableau ne soit pas reproduit ici. Le processus de développement lui-même n'est pas décrit au-delà du lien vers les directives de contribution. rg/discord) [![CI][badge-ci]](https://github.com/react-querybuilder/react-querybuilder/actions/workflows/main.yml) [![codecov.io][badge-codecov]][codecov-link] [![All Contributors][badge-all-contributors]](contributors-) [![pkg.pr.new][badge-pkg-pr-new]][pkg-pr-new-link] React Query Builder is a fully customizable query builder component for React, along with a collection of ut. Dans react-querybuilder/react-querybuilder, ce point doit être lu avec les noms propres du projet et sa structure publiée. Une seconde vérification de react-querybuilder, 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-querybuilder
Le README du composant crédite les travaux antérieurs de jQuery QueryBuilder, Angular QueryBuilder et React Awesome Query Builder comme inspiration. Le logiciel est sous licence MIT, avec des droits d'auteur détenus par Jake Boone et d'autres contributeurs. La licence accorde la permission d'utiliser, copier, modifier, fusionner, publier, distribuer, sous-licencier et vendre des copies du logiciel, à condition d'inclure l'avis de droit d'auteur et l'avis de permission ci-dessus dans toutes les copies ou portions substantielles. Le logiciel est fourni « tel quel », sans garantie d'aucune sorte, et les auteurs ne sont pas responsables des réclamations ou dommages. Le texte de la licence ne traite pas de la sécurité, du support ou des engagements de maintenance. rkflows/main.yml) [![codecov.io][badge-codecov]][codecov-link] [![All Contributors][badge-all-contributors]](contributors-) [![pkg.pr.new][badge-pkg-pr-new]][pkg-pr-new-link] React Query Builder is a fully customizable query builder component for React, along with a collection of utility functions for [importing from](https://react-querybuilder.js.org/docs/utils/import), and [e. Dans react-querybuilder/react-querybuilder, ce point doit être lu avec les noms propres du projet et sa structure publiée. Pour vérifier react-querybuilder, 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 du composant crédite les travaux antérieurs de jQuery QueryBuilder, Angular QueryBuilder et React Awesome Query Builder comme inspiration. Le logiciel est sous licence MIT, avec des droits d'auteur détenus par Jake Boone et d'autres contributeurs. La licence accorde la permission d'utiliser, copier, modifier, fusionner, publier, distribuer, sous-licencier et vendre des copies du logiciel, à condition d'inclure l'avis de droit d'auteur et l'avis de permission ci-dessus dans toutes les copies ou portions substantielles. Le logiciel est fourni « tel quel », sans garantie d'aucune sorte, et les auteurs ne sont pas responsables des réclamations ou dommages. Le texte de la licence ne traite pas de la sécurité, du support ou des engagements de maintenance. rkflows/main.yml) [![codecov.io][badge-codecov]][codecov-link] [![All Contributors][badge-all-contributors]](contributors-) [![pkg.pr.new][badge-pkg-pr-new]][pkg-pr-new-link] React Query Builder is a fully customizable query builder component for React, along with a collection of utility functions for [importing from](https://react-querybuilder.js.org/docs/utils/import), and [e. Dans react-querybuilder/react-querybuilder, ce point doit être lu avec les noms propres du projet et sa structure publiée. Une seconde vérification de react-querybuilder, 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-querybuilder convient à une équipe dont le besoin correspond aux capacités décrites dans react-querybuilder/react-querybuilder 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é