Migrating to v5
The transition from v4 to v5 should be fairly seemless. Core functionality has not been affected much since v4, other than a few bug fixes (see changelog). Significant code changes will only be necessary if you set the enableDragAndDrop
prop to true
and/or you use one of the compatibility packages.
Previous migration instructions: v3 to v4.
Drag-and-drop
To enable drag-and-drop in v5, you'll need to make two changes.
First, install react-dnd
and react-dnd-html5-backend
explicitly, along with the companion package @react-querybuilder/dnd
.
- npm
- Bun
- Yarn
- pnpm
npm i react-dnd react-dnd-html5-backend @react-querybuilder/dnd
bun add react-dnd react-dnd-html5-backend @react-querybuilder/dnd
yarn add react-dnd react-dnd-html5-backend @react-querybuilder/dnd
pnpm add react-dnd react-dnd-html5-backend @react-querybuilder/dnd
Second, instead of setting the enableDragAndDrop
prop explicitly, wrap your <QueryBuilder />
element in <QueryBuilderDnD />
from @react-querybuilder/dnd
. This will automatically set enableDragAndDrop={true}
on <QueryBuilder />
.
export function App() {
return (
- <QueryBuilder enableDragAndDrop />
+ <QueryBuilderDnD>
+ <QueryBuilder />
+ </QueryBuilderDnD>
);
}
We also strongly recommended passing all the exports from react-dnd
and react-dnd-html5-backend
in to <QueryBuilderDnD />
through its dnd
prop. Otherwise the query builder will initially be rendered with drag-and-drop disabled.
import { QueryBuilderDnD } from '@react-querybuilder/dnd';
import * as ReactDnD from 'react-dnd';
import * as ReactDndHtml5Backend from 'react-dnd-html5-backend';
import { QueryBuilder } from 'react-querybuilder';
export function App() {
return (
<QueryBuilderDnD dnd={{ ...ReactDnD, ...ReactDndHtml5Backend }}>
<QueryBuilder />
</QueryBuilderDnD>
);
};
More information is available in the full API documentation.
Compatibility packages
The recommended implementation of compatibility packages has been simplified in v5. Instead of explicitly passing the replacement components in to the controlElements
prop, you can wrap the <QueryBuilder />
element in the appropriate <QueryBuilder* />
context provider that will automatically apply the correct controlElements
, controlClassnames
, and any other relevant props (now or in the future!). The example below uses the Bootstrap-compatible package.
-import {
- bootstrapControlClassnames,
- bootstrapControlElements
-} from '@react-querybuilder/bootstrap';
+import { QueryBuilderBootstrap } from '@react-querybuilder/bootstrap';
import 'bootstrap-icons/font/bootstrap-icons.scss';
import 'bootstrap/scss/bootstrap.scss';
import { QueryBuilder } from 'react-querybuilder';
export function App() {
return (
- <QueryBuilder
- controlClassnames={bootstrapControlClassnames}
- controlElements={bootstrapControlElements}
- />
+ <QueryBuilderBootstrap>
+ <QueryBuilder />
+ </QueryBuilderBootstrap>
);
};
See the compatibility package documentation for more information about specific packages, particularly @react-querybuilder/material
.