
Product
Announcing Precomputed Reachability Analysis in Socket
Socket’s precomputed reachability slashes false positives by flagging up to 80% of vulnerabilities as irrelevant, with no setup and instant results.
@react-querybuilder/chakra
Advanced tools
Official react-querybuilder compatibility package for Chakra UI.
npm i react-querybuilder @react-querybuilder/chakra @chakra-ui/react @emotion/react react-icons
# OR yarn add / pnpm add / bun add
[!NOTE]
As of version 8, this package is no longer compatible with Chakra UI version 2.
For compatibility with Chakra UI version 2, use
@react-querybuilder/chakra2
.
To configure the query builder to use Chakra-compatible components, place QueryBuilderChakra
above QueryBuilder
and beneath ChakraProvider
in the component hierarchy.
import { ChakraProvider, createSystem, defaultConfig, Theme } from '@chakra-ui/react';
import { QueryBuilderChakra } from '@react-querybuilder/chakra';
import { useState } from 'react';
import { type Field, QueryBuilder, type RuleGroupType } from 'react-querybuilder';
const chakraTheme = createSystem(defaultConfig);
const fields: Field[] = [
{ name: 'firstName', label: 'First Name' },
{ name: 'lastName', label: 'Last Name' },
];
export function App() {
const [query, setQuery] = useState<RuleGroupType>({ combinator: 'and', rules: [] });
return (
<ChakraProvider value={chakraTheme}>
<Theme colorPalette="teal">
<QueryBuilderChakra>
<QueryBuilder fields={fields} defaultQuery={query} onQueryChange={setQuery} />
</QueryBuilderChakra>
</Theme>
</ChakraProvider>
);
}
[!NOTE]
Some additional styling may be necessary. We recommend the following:
.queryBuilder .chakra-native-select__root { width: fit-content; display: inline-block; } .queryBuilder .chakra-input { width: auto; display: inline-block; }
QueryBuilderChakra
is a React context provider that assigns the following props to all descendant QueryBuilder
elements. The props can be overridden on the QueryBuilder
or used directly without the context provider.
Export | QueryBuilder prop |
---|---|
chakraControlElements | controlElements |
chakraTranslations | translations |
ChakraActionElement | controlElements.actionElement |
ChakraNotToggle | controlElements.notToggle |
ChakraValueEditor | controlElements.valueEditor |
ChakraValueSelector | controlElements.valueSelector |
[!TIP]
By default, this package uses icons from
react-icons
for button labels. To reset button labels to their default strings, usedefaultTranslations
fromreact-querybuilder
.
<QueryBuilderChakra translations={defaultTranslations}>
[v8.5.0] - 2025-04-07
autoSelectValue
(documentation) behaves like autoSelectField
/autoSelectOperator
but for the value editor when it renders a select list.
translations
prop object has a new property values
that accepts placeholderName
, placeholderLabel
, and placeholderGroupLabel
properties (documentation). These translatable strings set the default values and labels when autoSelectValue
is set to false
.placeholderValueName
option was added to formatQuery
, which will now ignore rules where the value
matches the placeholder value as long as placeholderValueName
is defined (this behavior differs from placeholderFieldName
and placeholderOperatorName
, which do not need to be defined).translations
option: Map of the words "and", "or", "true", and "false" to their translated equivalents. Also covers prefix and suffix options for rule groups.wordOrder
option: Based on the linguistic concept of constituent word order, this option accepts all permutations of "SVO" ("SOV", "VSO", etc.) and outputs the field, operator, and value in the corresponding order (S = field, V = operator, O = value).operatorMap
option: Map of operators to their natural language equivalents. If the result can differ based on the valueSource
, the key should map to an array where the second element represents the string to be used when valueSource
is "field". The first element will be used in all other cases.@react-querybuilder/datetime
package now supports the "natural_language" format for date-type rules. Formatting can be customized by passing locales
, dateFormat
, or dateTimeFormat
as properties of the context
parameter. These options are passed to a Intl.DateTimeFormat
constructor.react-dnd
and related packages are now obfuscated to discourage bundlers like webpack from pre-processing those imports.FAQs
Custom Chakra UI components for react-querybuilder
The npm package @react-querybuilder/chakra receives a total of 3,349 weekly downloads. As such, @react-querybuilder/chakra popularity was classified as popular.
We found that @react-querybuilder/chakra 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.
Product
Socket’s precomputed reachability slashes false positives by flagging up to 80% of vulnerabilities as irrelevant, with no setup and instant results.
Product
Socket is launching experimental protection for Chrome extensions, scanning for malware and risky permissions to prevent silent supply chain attacks.
Product
Add secure dependency scanning to Claude Desktop with Socket MCP, a one-click extension that keeps your coding conversations safe from malicious packages.