React Query Builder

Full documentation is available at react-querybuilder.js.org.

Getting started

To get started, import the main component and the default stylesheet, then render the component in your app:

import QueryBuilder from 'react-querybuilder';
import 'react-querybuilder/dist/query-builder.css';

export const App = () => {
  return <QueryBuilder />;
};

For a more complete introduction, see the main package README or dive into the full documentation.

For documentation on react-querybuilder v3.12.1, click here.

Compatibility packages

In addition to the main react-querybuilder package, this repo also hosts official compatibility component packages for use with several popular style libraries including Ant Design, Bootstrap, Bulma, Chakra UI, and MUI.

Credits

This component was inspired by prior work from:

• jQuery QueryBuilder
• Angular QueryBuilder
• React Awesome Query Builder

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Jake Boone 💻 📖 🚧	Pavan Podila 💻 📖 ⚠️	Andrew Turgeon 💻 ⚠️	André Drougge 💻 ⚠️	Oumar Sharif DAMBABA 💻	Arte Ebrahimi 💻 📖 ⚠️	Carlos Azuaje 💻
Srinivas Damam 💻	Matthew Reishus 📖	Anish Duwal 💻 ⚠️	RomanLamsal1337 💻	Dmitriy Kolesnikov 💻	Vitor Barbosa 💻	Laxminarayana 💻 📖
Christian Mund 💻 📖	Dallas Larsen 💻	Ayush Srivastava 📖	Fabio Espinosa 💻 📖 ⚠️	Anatoly Bubenkov 💻 📖 ⚠️	Saurabh Nemade 💻 ⚠️	Edwin Xavier 💻 📖
Code Monk 💻 📖 ⚠️	ZigZagT 💻	mylawacad 💻	Kyrylo Stepanchuk 💻	Kasey Culmback 💻

This project follows the all-contributors specification. Contributions of any kind welcome!