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.
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.
Tip
To enable drag-and-drop, use @react-querybuilder/dnd.
For enhanced date/time support, use @react-querybuilder/datetime.
To enable expressions in rules, use @react-querybuilder/expr.
For rules engine functionality (if-then-else) use @react-querybuilder/rules-engine.
For instructions on migrating from earlier versions of react-querybuilder, see the version migration guide. To migrate from react-awesome-query-builder, see the RAQB migration guide.
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, PrimeReact, and Tremor. A React Native component is also available.
See the contribution guidelines.
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!