@react-querybuilder/dnd

@react-querybuilder/dnd

Augments react-querybuilder with drag-and-drop functionality.

To see this in action, check out the react-querybuilder demo with the drag-and-drop option enabled.

Full documentation

Installation

npm i react-querybuilder @react-querybuilder/dnd react-dnd react-dnd-html5-backend
# OR yarn add / pnpm add / bun add

Usage

To enable the drag-and-drop functionality of a query builder, wrap the <QueryBuilder /> element in <QueryBuilderDnD /> and pass in the exports from react-dnd and react-dnd-html5-backend as props to QueryBuilderDnD.

import { QueryBuilderDnD } from '@react-querybuilder/dnd';
import * as ReactDnD from 'react-dnd';
import * as ReactDndHtml5Backend from 'react-dnd-html5-backend';
import { QueryBuilder, RuleGroupType } from 'react-querybuilder';

const fields = [
  { name: 'firstName', label: 'First Name' },
  { name: 'lastName', label: 'Last Name' },
];

const App = () => {
  const [query, setQuery] = useState<RuleGroupType>({ combinator: 'and', rules: [] });

  return (
    <QueryBuilderDnD dnd={{ ...ReactDnD, ...ReactDndHtml5Backend }}>
      <QueryBuilder fields={fields} query={query} onQueryChange={q => setQuery(q)} />
    </QueryBuilderDnD>
  );
};

Notes

• While not strictly necessary, we strongly recommend passing the react-dnd and react-dnd-html5-backend exports in as props to <QueryBuilderDnD />. If they are not passed in as props, the initial render of the query builder will have drag-and-drop disabled until the dependencies are asynchronously loaded via import().

• <QueryBuilderDnD /> will automatically set the enableDragAndDrop prop to true on any descendant <QueryBuilder /> elements unless enableDragAndDrop is explicitly set to false on the <QueryBuilder /> element.

• <QueryBuilderDnD /> does not need to be an immediate ancestor to <QueryBuilder />.

• Multiple <QueryBuilder />s may be nested beneath a single <QueryBuilderDnD />. The same drag-and-drop settings will be applied to each of them.

• If your application already uses react-dnd outside the scope of a query builder, use QueryBuilderDndWithoutProvider instead of QueryBuilderDnD to inherit context from your existing <DndProvider />. Example:

  import { QueryBuilderDndWithoutProvider } from '@react-querybuilder/dnd';
  import { DndProvider } from 'react-dnd';
  import { HTML5Backend } from 'react-dnd-html5-backend';
  import { QueryBuilder, RuleGroupType } from 'react-querybuilder';
  import { SomeOtherDndContextConsumer } from './SomeOtherDndContextConsumer';
  
  const fields = [
    { name: 'firstName', label: 'First Name' },
    { name: 'lastName', label: 'Last Name' },
  ];
  
  const ChildComponentOfDndProvider = () => {
    const [query, setQuery] = useState<RuleGroupType>({ combinator: 'and', rules: [] });
  
    return (
      <QueryBuilderDndWithoutProvider>
        <QueryBuilder fields={fields} query={query} onQueryChange={q => setQuery(q)} />
      </QueryBuilderDndWithoutProvider>
    );
  };
  
  const App = () => {
    return (
      <DndProvider backend={HTML5Backend}>
        <SomeOtherDndContextConsumer />
        <ChildComponentOfDndProvider />
      </DndProvider>
    );
  };
  

Changelog

[v6.5.2] - 2023-10-19

Changed

• The useValueEditor hook will now update all values that are arrays (Array.isArray(value)) to the first element of the array (value[0]) when operator is anything except "between", "notBetween", "in", or "notIn". Previously this logic only applied when inputType was "number". (To bypass this logic, pass { skipHook: true }.)

Added

• New paramsKeepPrefix option for formatQuery, which enables compatibility with SQLite. When used in conjunction with the "parameterized_named" export format, the params object keys will maintain the paramPrefix string as it appears in the sql string (e.g. { '$param_1': 'val' } instead of { param_1: 'val' }).

Fixed

• [#523] parseMongoDB now properly handles objects in the form of { fieldName: { $not: { /* ...rule */ } } }. This problem was particularly evident for $regex operators that should have generated rules with "doesNot[Contain/BeginWith/EndWith]" operators, since formatQuery(query, 'mongodb') produces this structure and parseMongoDB was not handling the inverse operation.
• isRuleGroup will not error when the argument is null.
• [#572] parseSQL now recognizes signed numeric values like -12 or +14.