React Query Builder

npm Demo Docs Learn from the maintainer Chat

CI codecov.io All Contributors

React Query Builder is a fully customizable query builder component for React, along with a collection of utility functions for importing from, and exporting to, various query languages like SQL, MongoDB, and more. Demo is here.

Complete 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'; // or .scss

export function App() {
  const [query, setQuery] = useState({
    combinator: 'and',
    rules: [],
  });

  return <QueryBuilder query={query} onQueryChange={setQuery} />;
}

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, use the @react-querybuilder/dnd package.

For instructions on migrating from earlier versions of react-querybuilder, click here.

Compatibility packages

Ant Design Bootstrap Bulma Chakra UI
Fluent UI Mantine MUI React Native Tremor

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, Fluent UI, Mantine, MUI, and Tremor. A functionally equivalent React Native-compatible component is also available.

Development

See the contribution guidelines.

Credits

This component was inspired by prior work from:

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Jake Boone
Jake Boone

πŸ’» πŸ“– 🚧 ⚠️
Pavan Podila
Pavan Podila

πŸ’» πŸ“– ⚠️
Andrew Turgeon
Andrew Turgeon

πŸ’» ⚠️
AndrΓ© Drougge
AndrΓ© Drougge

πŸ’» ⚠️
Oumar Sharif DAMBABA
Oumar Sharif DAMBABA

πŸ’»
Arte Ebrahimi
Arte Ebrahimi

πŸ’» πŸ“– ⚠️
Carlos Azuaje
Carlos Azuaje

πŸ’»
Srinivas Damam
Srinivas Damam

πŸ’»
Matthew Reishus
Matthew Reishus

πŸ“–
Anish Duwal
Anish Duwal

πŸ’» ⚠️
RomanLamsal1337
RomanLamsal1337

πŸ’»
Dmitriy Kolesnikov
Dmitriy Kolesnikov

πŸ’»
Vitor Barbosa
Vitor Barbosa

πŸ’»
Laxminarayana
Laxminarayana

πŸ’» πŸ“–
Christian Mund
Christian Mund

πŸ’» πŸ“–
Dallas Larsen
Dallas Larsen

πŸ’»
Ayush Srivastava
Ayush Srivastava

πŸ“–
Fabio Espinosa
Fabio Espinosa

πŸ’» πŸ“– ⚠️
Anatoly Bubenkov
Anatoly Bubenkov

πŸ’» πŸ“– ⚠️
Saurabh Nemade
Saurabh Nemade

πŸ’» ⚠️
Edwin Xavier
Edwin Xavier

πŸ’» πŸ“–
Code Monk
Code Monk

πŸ’» πŸ“– ⚠️
ZigZagT
ZigZagT

πŸ’»
mylawacad
mylawacad

πŸ’»
Kyrylo Stepanchuk
Kyrylo Stepanchuk

πŸ’»
Kasey Culmback
Kasey Culmback

πŸ’»
Ahmed Fasih
Ahmed Fasih

πŸ’»
Austin Stowe
Austin Stowe

πŸ’»
Manuel
Manuel

πŸ“–
Victor Arowo
Victor Arowo

πŸ“–
Ekin Koc
Ekin Koc

πŸ’»
Zach Blume
Zach Blume

πŸ’»
ηŽ‹ζ’
ηŽ‹ζ’

πŸ“–
Jan BednΓ‘Ε™
Jan BednΓ‘Ε™

πŸ’» ⚠️
Stephen Peery
Stephen Peery

πŸ’» ⚠️
stil
stil

πŸ’» ⚠️
Chiawei Ong
Chiawei Ong

πŸ’» ⚠️
De Lille Felix
De Lille Felix

πŸ’» ⚠️
RaphaΓ«l Bideau
RaphaΓ«l Bideau

πŸ’»

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