react-querybuilder/react-querybuilder

The Query Builder component for React

Summary

React Query Builder is a TypeScript React component for constructing structured queries through a visual interface, paired with utility functions for converting queries to and from formats like SQL and MongoDB. It ships optional companion packages for drag-and-drop, date/time support, rule expressions, and a rules engine, and it offers compatibility adapters for several major UI libraries.

What it is useful for

The library fits applications where end users need to build filter or search criteria without writing query syntax by hand, such as admin dashboards, reporting tools, or log explorers. The component emits a tree of rules and groups that can be passed through the included export utilities to produce SQL WHERE clauses, MongoDB queries, CEL, JsonLogic, and other supported outputs. Import utilities are also available for parsing existing queries back into the visual tree.

The component can be styled to match a host application via compatibility packages for MUI, Ant Design, Chakra UI, Bootstrap, Bulma, Mantine, Fluent UI, PrimeReact, and Tremor. A separate React Native package is also offered, and official ports exist for Solid, Svelte, and Vue that share the same query format and core utilities.

Documented limits: drag-and-drop, advanced date/time support, in-rule expressions, and the rules engine are not in the default install and require the dedicated companion packages listed in the README. Framework support outside React requires using the separate port repositories.

How engineers can use it

The README documents a minimal setup. After installing react-querybuilder, import the component and the default stylesheet, then render it with a default query and a change handler:

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} />;
}

The onQueryChange callback receives the updated tree, which can be passed to the export utility to produce SQL, MongoDB, CEL, or JsonLogic output.

For a specific component library, swap the default import for the matching compatibility package (for example, @react-querybuilder/material for MUI). Add @react-querybuilder/dnd for drag-and-drop rule reordering, @react-querybuilder/datetime for richer date/time fields, @react-querybuilder/expr for in-rule expressions, and @react-querybuilder/rules-engine for if-then-else evaluation. Engineers moving from react-awesome-query-builder can follow the RAQB migration guide linked in the README. The full API, configuration options, and additional examples are in the documentation site, which the README identifies as the authoritative reference.