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:
Contributors β¨
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!