Compatibility packages

The default React Query Builder components, being basic HTML5 form controls, are very flexible when it comes to styling (primarily through the controlClassnames prop). But some style libraries require different HTML structure to style their form controls correctly.

Packages

Official component packages compatible with several popular style libraries are available under the @react-querybuilder org on npm.

You can see each alternate component package in action by clicking the corresponding link on the demo page. The "Demo" links in the table below will load the demo with the respective style library preselected, and the CodeSandbox links will open codesandbox.io with an editable example of the library preloaded.

Official site	Compatibility package	Demo	CodeSandbox
Ant Design	@react-querybuilder/antd	Demo	CodeSandbox
Bootstrap	@react-querybuilder/bootstrap	Demo	CodeSandbox
Bulma	@react-querybuilder/bulma	Demo	CodeSandbox
Chakra UI	@react-querybuilder/chakra	Demo	CodeSandbox
MUI	@react-querybuilder/material	Demo	CodeSandbox

Exports

Each compatibility package exports a *ControlElements object that can be used as the controlElements prop in <QueryBuilder />. Some packages also export a *ControlClassnames object for use as the controlClassnames prop.

This example uses the Bootstrap library:

import {
  bootstrapControlClassnames,
  bootstrapControlElements,
} from '@react-querybuilder/bootstrap';
import 'bootstrap/scss/bootstrap.scss';
import { QueryBuilder } from 'react-querybuilder';
import { defaultQuery, fields } from './constants';

export function App() {
  return (
    <QueryBuilder
      fields={fields}
      defaultQuery={defaultQuery}
      controlElements={bootstrapControlElements}
      controlClassnames={bootstrapControlClassnames}
    />
  );
}

Customization

Many of the compatibility components accept any props defined by the style library for the actual rendered component in addition to the standard props defined by react-querybuilder. This allows you to idiomatically customize the library component while leaving the integration with the query builder up to the compatibility component.

For example, the AntDActionElement component from @react-querybuilder/antd renders the Button component from antd, so it can accept properties of the ActionWithRulesProps interface from react-querybuilder and the ButtonProps interface from antd.

In the example below, the size prop is not available on ActionWithRulesProps, but it's accepted because it's one of antd's Button props (from the ButtonProps interface).

import { AntDActionElement, antdControlElements } from '@react-querybuilder/antd';
import { QueryBuilder, type ActionWithRulesProps } from 'react-querybuilder';

const MyAntDActionElement = (props: ActionWithRulesProps) => (
  <AntDActionElement {...props} size="large" />
);

export const App = () => {
  return (
    <QueryBuilder
      controlElements={{
        ...antdControlElements,
        addRuleAction: MyAntDActionElement,
        addGroupAction: MyAntDActionElement,
        cloneRuleAction: MyAntDActionElement,
        cloneGroupAction: MyAntDActionElement,
        lockRuleAction: MyAntDActionElement,
        lockGroupAction: MyAntDActionElement,
        removeRuleAction: MyAntDActionElement,
        removeGroupAction: MyAntDActionElement,
      }}
    />
  );
};

This list shows which library components' props will be accepted by the compatibility components, in addition to those defined by react-querybuilder.

Compatibility component	Base props	Rendered library component
AntDActionElement	ActionWithRulesProps	import { Button } from 'antd'
AntDDragHandle	DragHandleProps	import { HolderOutlined } from '@ant-design/icons'
AntDNotToggle	NotToggleProps	import { Switch } from 'antd'
AntDValueSelector	VersatileSelectorProps	import { Select } from 'antd'
ChakraActionElement	ActionWithRulesProps	import { Button } from '@chakra-ui/react'
ChakraDragHandle	DragHandleProps	import { IconButton } from '@chakra-ui/react'
ChakraNotToggle	NotToggleProps	import { Switch } from '@chakra-ui/react'
ChakraValueSelector	VersatileSelectorProps	import { Select } from '@chakra-ui/react'
MaterialActionElement	ActionWithRulesProps	import Button from '@mui/material/Button'
MaterialDragHandle	DragHandleProps	import DragIndicator from '@mui/icons-material/DragIndicator'
MaterialNotToggle	NotToggleProps	import Switch from '@mui/material/Switch'
MaterialValueSelector	VersatileSelectorProps	import Select from '@mui/material/Select'