Full documentation is available at react-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';
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.
For documentation on react-querybuilder v3.12.1, click here.
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.
To load a test page with a basic query builder using the default components, run yarn start.
To load the full demo featuring all the compatibility components, run yarn demo.
This component was inspired by prior work from:
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!