Skip to main content

React Query Builder

npm Docs Full demo IE11-compatible demo Continuous Integration codecov.io All Contributors

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

Screenshot

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.

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

Compatibility packages

Ant Design Bootstrap Bulma Chakra MUI

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:

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!