@react-querybuilder/native
Advanced tools
Changelog
[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] ...`
.