Migrating to v4

React Query Builder v4 was mainly a feature release, but changes to the structure of the rendered HTML necessitated a major version bump.

A new drag handle <span /> element will always be rendered at the front of every rule and rule group header element, regardless of whether you enable the drag-and-drop feature. If drag-and-drop is disabled (the default setting), you should hide the drag handle by either 1) using the default stylesheet which hides it automatically when drag-and-drop is disabled, or 2) hiding it with a style rule like .queryBuilder-dragHandle { display: none; }.

tip

The default stylesheet can be loaded as CSS or SCSS:

import 'react-querybuilder/dist/query-builder.css';
// OR
import 'react-querybuilder/dist/query-builder.scss';

If using TypeScript, custom operatorSelector components will need to accommodate OptionGroup<NameLabelPair>[] in addition to the normal NameLabelPair[].

Internal methods for immutably updating queries have been moved from the schema prop to the new actions prop on both RuleProps and RuleGroupProps. Custom <Rule /> and <RuleGroup /> components will need to adjust their prop declarations.