
Research
Security News
The Growing Risk of Malicious Browser Extensions
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
@react-querybuilder/dnd
Advanced tools
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.
npm i --save react-querybuilder @react-querybuilder/dnd react-dnd react-dnd-html5-backend
# OR
yarn add react-querybuilder @react-querybuilder/dnd react-dnd react-dnd-html5-backend
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>
);
};
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>
);
};
[v6.0.0] - 2023-02-18
ValueEditor
update--including the ValueEditor
s in the compatibility packages--for "between"/"notBetween" operators. When the operator
for a rule is "between" or "notBetween", two inputs will be displayed. Each will have the class "rule-value-list-item". They will manage the value
as a comma-separated list unless listsAsArrays
is true
, in which case a proper array will be used.$rqb-border-radius
) is now 0.25rem
(previously 4px
). Visually, this should be the same for most users since 16px
is the default font-size
on most browsers, and $16 \times 0.25 = 4$.c
has been removed. Use a package like clsx
(what RQB uses internally) instead.is-small
class, so they will be rendered at their default size."exports"
field in their package.json
for better ESM compatibility.ValueEditor
prop selectorComponent
(optional) enables the replacement of only the selector component in the value editor without recreating the logic in the default value editor. E.g., const MyValueEditor = (props: ValueEditorProps) => (<ValueEditor {...props} selectorComponent={MyValueSelector} />)
will use the default value editor logic and presentation except when it would normally display the default ValueSelector
.@react-querybuilder/native
and associated example showcasing multiple UI libraries.useQueryBuilder
: All logic and configuration formerly internal to the QueryBuilder
component has been extracted into a custom Hook, making it easy to implement one's own presentation layer without reproducing or copy-pasting the official component code.useRuleGroup
: As useQueryBuilder
is to the QueryBuilder
component, the useRuleGroup
Hook is to the RuleGroup
component.useRule
: As useRuleGroup
is to the RuleGroup
component, the useRule
Hook is to the Rule
component.RuleGroupHeaderComponents
/RuleGroupBodyComponents
: These JSX fragments have been extracted from the RuleGroup
component and exposed as named exports, enabling the creation of a custom RuleGroup
wrapper without recreating the "innards" of the default RuleGroup
. (For example, the new @react-querybuilder/native
package wraps these fragments in View
elements from react-native
).ValueEditor
s new behavior for "between"/"notBetween" operators.
QueryBuilder
prop getValueEditorSeparator
: Takes a field
name and an operator
name and should return a ReactNode
(string, element, etc.) that will be placed between the two editors when operator
is "between" or "notBetween". E.g., getValueEditorSeparator={() => "and"}
.QueryBuilder
prop parseNumbers
: When true
, the default ValueEditor
will update its rule with an actual number instead of the string representation whenever possible.ValueEditor
prop skipHook
: When true
, the useValueEditor
hook call within the default ValueEditor
component will not make query updates. Enables safer rendering of the default ValueEditor
as a fallback to a custom value editor.useValueEditor
hook now returns an object with valueAsArray
and multiValueHandler
properties. See ValueEditor
code for usage.regenerateIDs
works for any object, not just rule groups.add
, remove
, update
, and move
) will fail gracefully and return the original query if the provided path
or parentPath
points to an invalid location in the query hierarchy.formatQuery
option quoteFieldNamesWith
now accepts an array of strings with two elements. The first element will precede each field name and the second will succeed each field name. E.g., ['[', ']']
would result in `[Field name] ...`
.FAQs
Drag-and-drop-enabled version of react-querybuilder
The npm package @react-querybuilder/dnd receives a total of 9,368 weekly downloads. As such, @react-querybuilder/dnd popularity was classified as popular.
We found that @react-querybuilder/dnd demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
Research
Security News
An in-depth analysis of credential stealers, crypto drainers, cryptojackers, and clipboard hijackers abusing open source package registries to compromise Web3 development environments.
Security News
pnpm 10.12.1 introduces a global virtual store for faster installs and new options for managing dependencies with version catalogs.