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, dive into the full documentation, or browse the example projects.

To enable drag-and-drop functionality, see the @react-querybuilder/dnd package README.

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.

Development

To load a test page with a basic query builder using the default components, run yarn start.

To load the full demo featuring all the compatibility components, run yarn demo.

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 💻	Ahmed Fasih 💻

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