Skip to main content
Version: v5

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 i 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>
);
};
info

See the compatibility package documentation for more information about specific packages, particularly @react-querybuilder/material.