Repository files navigation

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

Complete documentation is available atreact-querybuilder.js.org.

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 .scssexportfunctionApp(){const[query,setQuery]=useState({combinator:'and',rules:[],});return<QueryBuilderdefaultQuery={query}onQueryChange={setQuery}/>;}

For a more complete introduction, see themain package README, dive into thefull documentation, or browse theexample 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 ofreact-querybuilder,click here.

In addition to the mainreact-querybuilder package, this repo also hosts official compatibility component packages for use with several popular style libraries includingAnt Design,Bootstrap,Bulma,Chakra UI,Fluent UI,Mantine,MUI, andTremor. AReact Native component is also available.

Seethe contribution guidelines.

This component was inspired by prior work from:

• jQuery QueryBuilder
• Angular QueryBuilder
• React Awesome Query Builder

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 💻⚠️	yywing 💻

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