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.