React Query Builder

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.

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 defaultQuery={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 @react-querybuilder/dnd.

For enhanced date/time support, use @react-querybuilder/datetime.

For instructions on migrating from earlier versions of react-querybuilder, 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, Fluent UI, Mantine, MUI, and Tremor. A React Native component is also available.

Development

See the contribution guidelines.

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
💻
Austin Stowe
💻
Manuel
📖
Victor Arowo
📖
Ekin Koc
💻
Zach Blume
💻
王恒
📖
Jan Bednář
💻 ⚠️
Stephen Peery
💻 ⚠️
stil
💻 ⚠️
Chiawei Ong
💻 ⚠️
De Lille Felix
💻 ⚠️
Raphaël Bideau
💻
Dave Anderson
💻
Roman Ogoreltsev
💻 ⚠️
Abdullah Ebrahim
💻
sajov
💻 ⚠️

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