React Query Builder
Full 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';
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.
To enable drag-and-drop functionality, see the @react-querybuilder/dnd package README.
For instructions on migrating from earlier versions of react-querybuilder, click here.
For documentation on react-querybuilder v3.12.1, 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, and MUI.
Development
To run a test page with a basic query builder using the default components, run yarn start.
To run the documentation website, run yarn website:start. Click “Demo” in the page header to load the full demo with all options and compatibility components available.
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!