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 run a test page with a basic query builder using the default components, run yarn start.

To run the documentation website, run yarn website:start. Click "Demo" in the page header to load the full demo with all options and compatibility components available.

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!