Custom MUI (Material Design) components for react-querybuilder
npm install @react-querybuilder/materialOfficial react-querybuilder compatibility package for MUI/Material Design.
- Demo
- Full documentation
- CodeSandbox / StackBlitz example projects
``bash`
npm i react-querybuilder @react-querybuilder/material @mui/icons-material @mui/materialOR yarn add / pnpm add / bun add
To configure the query builder to use Material-compatible components, place QueryBuilderMaterial above QueryBuilder and beneath MaterialProvider in the component hierarchy.
`tsx
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { QueryBuilderMaterial } from '@react-querybuilder/material';
import { useState } from 'react';
import { type Field, QueryBuilder, type RuleGroupType } from 'react-querybuilder';
const muiTheme = createTheme();
const fields: Field[] = [
{ name: 'firstName', label: 'First Name' },
{ name: 'lastName', label: 'Last Name' },
];
export function App() {
const [query, setQuery] = useState
return (
);
}
`
QueryBuilderMaterial 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 |materialControlElements
| ------------------------- | ------------------------------- |
| | controlElements |materialTranslations
| | translations |MaterialActionElement
| | controlElements.actionElement |MaterialDragHandle
| | controlElements.dragHandle |MaterialNotToggle
| | controlElements.notToggle |MaterialShiftActions
| | controlElements.shiftActions |MaterialValueEditor
| | controlElements.valueEditor |MaterialValueSelector
| | controlElements.valueSelector |
> [!TIP]
>
> By default, this package uses icons from @mui/icons-material for button labels. To reset button labels to their default strings, use defaultTranslations from react-querybuilder.`
>
> tsx``
>
>
> [!IMPORTANT]
>
> In environments based on React Server Components, preload the MUI components.