react-querybuilder: the quickstart renders without importing the hook it calls

The getting-started snippet forgets its own hook

The quick start is short enough to copy line by line, and it does not compile as printed:

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

Two imports are present, the component and the default stylesheet, and the stylesheet path ends with an alternative, since a Sass build is supported from the same dist directory. But the component body calls useState, and useState is not imported from React anywhere in the snippet, so the example throws on first render until you add it. The rest of the shape is the part worth memorising, because it is the query object every other package agrees on: a combinator, here the string and, and a rules array, here empty. The component takes that as defaultQuery and hands the next version back through onQueryChange, which makes the parent's state the single owner of the query. Past the snippet, the file sends you to three places for anything more: the main package readme for a fuller introduction, the complete documentation, and a directory of example projects you can read as working code.

Ten compatibility packages and three framework ports

The breadth here is the pitch, and it comes as separate npm packages rather than configuration. Nine compatibility packages cover style libraries: Ant Design, Bootstrap, Bulma, Chakra UI, Fluent UI, Mantine, MUI, PrimeReact and Tremor, each published under the @react-querybuilder scope, plus a React Native component. Three more ports take the component to other frameworks, in separate repositories: Solid, Svelte and Vue. The file states what makes that cheap, namely that each port shares the same query object format and uses the core package underneath, so the import and export utilities, including SQL, MongoDB, CEL and JsonLogic, and most configuration options behave identically across frameworks. One naming wrinkle: the Solid and Svelte ports are published unscoped as solid-querybuilder and svelte-querybuilder, while the Vue port keeps the @react-querybuilder scope as @react-querybuilder/vue. Anyone writing a cross-framework wrapper has to remember that difference. The header carries a hosted demo and a community chat link next to the documentation, so the fastest way to judge whether the query object suits your product is to open the demo and build one filter by hand.

The features you expect are separate packages

Four capabilities that would normally be built into a query builder are documented as add-on packages, each linked from a tip block near the top of the file. Drag and drop comes from @react-querybuilder/dnd. Enhanced date and time support comes from @react-querybuilder/datetime. Expressions inside rules come from @react-querybuilder/expr. And if-then-else behaviour, described as rules engine functionality, comes from @react-querybuilder/rules-engine. The reason for the split is structural rather than ideological: the core package stays a component plus query logic, and anything that pulls in extra runtime weight or extra framework surface lives outside it. The cost is that a product asking for all four ships all four, and the documentation has to make sure you notice, which is what those four tips exist for. The file also links the main package readme, the full documentation and a directory of example projects for anything the snippet does not cover.

Bun runs the scripts while npm hosts the packages

The development setup is a Bun workspace rather than an npm one. The root holds bun.lock and a bun configuration file, and the scripts are Bun invocations: the start script runs the development app server with hot reload through Bun, and every package has its own start and build script addressed by workspace filter. Builds come in two shapes, a parallel one that filters across every package matching the pattern for both the unscoped and scoped query builder names, and a sequential variant for when order matters, plus a per-package build for each compatibility package. Two consequences follow. The workspace list also includes the website, which that filter pattern does not match, so the documentation site is built on its own path, through the hosting configuration at the root rather than through that script. And a contributor following the quick start with npm installed will find no scripts that work as written, since the repository has no npm lockfile. A lerna configuration file sits at the root alongside the Bun workspace setup, which is one more tool from an earlier era of monorepos being kept in place rather than replaced.

Two migration guides, one of them from another project

Migration is treated as a first-class concern, with two separate guides. One is a version migration guide for moving between earlier releases of this library, which is the ordinary consequence of a project shipping a long sequence of patch releases. The other is a guide for coming from react-awesome-query-builder, named in full as RAQB in the file, which is a different project by different authors with its own query format. That second guide is the more interesting one, because arriving users bring an existing query shape and an existing set of expectations about validation and formatting, and the file treats that as a supported path rather than an unsupported import. The credits section says the same thing from the other direction: the component was inspired by jQuery QueryBuilder, Angular QueryBuilder and React Awesome Query Builder, so the lineage is acknowledged at the level of ideas rather than of code. Both guides live under the documentation site rather than in the repository, so a reader working from a checkout has only the example projects to learn the format from.

A type-correctness checker sits in the root config

The root configuration tells you what this project worries about. There is a configuration file for the Are The Types Wrong checker, which verifies that a package's declared types work for consumers who are not using the same TypeScript settings, which is a packaging bug that unit tests cannot catch. There is a patches directory, meaning dependencies are patched rather than forked, so a fix is applied at install time and has to be kept current. Typedoc configuration sits beside it for API documentation generation, and a hosting configuration file for the documentation site. Linting and formatting are oxlint and oxfmt rather than eslint and prettier, with one config file each at the root, and tests run through vitest with a config in TypeScript module form. The examples directory holds more than twenty applications, one per compatibility package plus Next, Preact, native Expo, the drag-and-drop package, the date package, the expressions package and the rules engine, which is a lot of surface to keep green. That example directory doubles as the compatibility matrix, since each application pins exactly one library, so a regression in a single compatibility package surfaces as a failing example rather than as a user report. The directory also carries a shared template, a script that generates the example applications, and a configuration module that holds the query objects they all start from.

Three patch releases in five days

The release cadence is fast and the numbering is disciplined: v8.24.1 on 2026-09-21, then v8.24.2 and v8.24.3 on 2026-09-25, all patch increments inside the same minor. The last commit on the default branch is dated 2026-10-02, a week later. That pattern has consequences for how you consume it. A patch number tells you almost nothing about behaviour, so the changelog is the only useful record of what changed, and the repository keeps one at the root alongside a checklist document that is not explained anywhere in the visible text. The header also carries a badge linking to a paid course by the maintainer on building admin and reporting interfaces in React, and a package registry badge for continuous releases, which together say where the project's audience is being pointed as well as where its code is published.

Editorial conclusion

React Query Builder is a mature choice for a reporting or admin surface where users need to compose filters themselves, and the compatibility package approach means you are not forced into one component library. Three things to know before adopting it. The query object format is the real contract, and it is shared with the Solid, Svelte and Vue ports, so read it before designing your persistence layer. The features people assume are built in are separate packages, so budget for drag-and-drop, date and time handling, expressions and the rules engine as four more dependencies. And the quickstart snippet in the file calls a hook it never imports, which tells you the documentation is maintained by someone who has the example projects open next to it. MIT licensed, newest patch release v8.24.3 from 2026-09-25, last push 2026-10-02.

Frequently asked questions

Official sources

1. Official documentation
2. Official README
3. Project repository
4. Release notes