RuleGroup

The RuleGroup component renders the recursive, hierarchical query structure of React Query Builder. It calls the useRuleGroup hook to prepare props for its subcomponents.

Subcomponents

RuleGroup renders an outer <div> containing two inner <div>s: the first with header elements (based on group properties) and the second with body elements (derived primarily from the group's rules array).

tip

The header and body layout components are HTML-agnostic. This allows @react-querybuilder/native to render the same layout components within React Native <View> elements, and you can adapt them similarly for other frameworks.

RuleGroupHeaderComponents

This component renders the following elements in this order:

• Shift actions¹
• Drag handle²
• Combinator selector³
• "Not" toggle⁴
• Add rule button
• Add group button
• Clone group button⁵
• Lock group button⁶
• Remove group button⁷

RuleGroupBodyComponents

This component iterates through a group's rules array, rendering a child RuleGroup element for each subgroup and a Rule element for each rule.

When showCombinatorsBetweenRules is true, an inline combinator⁸ (using the group's combinator value) appears before each rule or group except the first.

With independent combinators, each odd-numbered index in the rules array contains a string representing a combinator value. These elements render as independent inline combinators.

note

The showCombinatorsBetweenRules prop is ignored if the query is using independent combinators.

Footnotes

1. Only rendered if showShiftActions is true. ↩

2. Only rendered if enableDragAndDrop is true. ↩

3. Only rendered if showCombinatorsBetweenRules is disabled and the query is not using independent combinators. ↩

4. Only rendered if showNotToggle is true. ↩

5. Only rendered if showCloneButtons is true. ↩

6. Only rendered if showLockButtons is true. ↩

7. Only rendered if the group is not the query root. ↩

8. The inlineCombinator component in turn renders the configured combinatorSelector. ↩