@react-querybuilder/material

@react-querybuilder/material

Official react-querybuilder components for MUI/Material Design.

To see them in action, check out the react-querybuilder demo or load the example in CodeSandbox.

Installation

npm i --save react-querybuilder @react-querybuilder/material @mui/icons-material @mui/material
# OR
yarn add react-querybuilder @react-querybuilder/material @mui/icons-material @mui/material

Usage

import { createTheme, ThemeProvider } from '@mui/material/styles';
import { materialControlElements } from '@react-querybuilder/material';
import { QueryBuilder, RuleGroupType } from 'react-querybuilder';

const muiTheme = createTheme();

const fields = [
  { name: 'firstName', label: 'First Name' },
  { name: 'lastName', label: 'Last Name' },
];

const App = () => {
  const [query, setQuery] = useState<RuleGroupType>({ combinator: 'and', rules: [] });

  return (
    <ThemeProvider theme={muiTheme}>
      <QueryBuilder
        fields={fields}
        query={query}
        onQueryChange={q => setQuery(q)}
        controlElements={materialControlElements}
      />
    </ThemeProvider>
  );
};

Changelog

[v4.4.0] - 2022-05-30

Changed

(This list may look long, but the breaking changes should only affect a small minority of users.)

• Several utility functions that were trivial or only really useful internal to this package are no longer exported from react-querybuilder. To see which ones, check the internal folder. All exports from that folder were previously exported from the utils folder, which is re-exported in its entirety from the main entry point.
• The RuleProps and RuleGroupProps interfaces have deprecated the props that were individual properties of rules/groups, and have added a prop containing the full rule or group object. This should only affect users that implement a custom <RuleGroup /> component but use the default <Rule /> component, since <Rule /> now expects a rule prop.
  • In RuleProps: field, operator, value, and valueSource are deprecated and replaced by rule: RuleType.
  • In RuleGroupProps: combinator, rules, and not are deprecated and replaced by ruleGroup: RuleGroupTypeAny.
• Internal methods for immutably updating queries have been moved from the schema prop to the new actions prop on both RuleProps and RuleGroupProps. Custom <Rule /> and <RuleGroup /> components will need to adjust their prop declarations.

Fixed

• vite-tsconfig-paths was mistakenly added to the dependencies list instead of devDependencies for the main package in [v4.1.3].

Added

• debugMode now triggers logging when the query or options are updated and when a query update fails for some reason (e.g. the path is disabled).
• New onLog callback prop is used instead of console.log when debugMode is true.
• As a consequence of the new properties on RuleProps and RuleGroupProps (rule and ruleGroup, respectively), custom <Rule /> and <RuleGroup /> components now have access to their full rule/group objects, including any non-standard properties. This can greatly simplify the use of customized query objects.
• <QueryBuilder /> will detect potential problems with using the component in a controlled vs uncontrolled manner and will log errors to the console (in "development" mode only). This includes the following situations:
  • Both query and defaultQuery props are defined (TypeScript will complain about this at compile time, errors will be logged at run time)
  • query prop is undefined in one render and then defined in the next render
  • query prop is defined in one render and then undefined in the next render