@react-querybuilder/fluent

@react-querybuilder/fluent

Official react-querybuilder compatibility package for Fluent UI.

• Demo
• Full documentation
• CodeSandbox / StackBlitz example projects

Installation

npm i react-querybuilder @react-querybuilder/fluent @fluentui/react-components @fluentui/react-icons-mdl2
# OR yarn add / pnpm add / bun add

Usage

To configure the query builder to use Fluent-compatible components, place QueryBuilderFluent above QueryBuilder and beneath FluentProvider in the component hierarchy.

import { FluentProvider, webLightTheme } from '@fluentui/react-components';
import { QueryBuilderFluent } from '@react-querybuilder/fluent';
import { useState } from 'react';
import { type Field, QueryBuilder, type RuleGroupType } from 'react-querybuilder';

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 (
    <FluentProvider theme={webLightTheme}>
      <QueryBuilderFluent>
        <QueryBuilder fields={fields} defaultQuery={query} onQueryChange={setQuery} />
      </QueryBuilderFluent>
    </FluentProvider>
  );
}

QueryBuilderFluent 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
fluentControlElements	controlElements
fluentTranslations	translations
FluentActionElement	controlElements.actionElement
FluentDragHandle	controlElements.dragHandle
FluentNotToggle	controlElements.notToggle
FluentShiftActions	controlElements.shiftActions
FluentValueEditor	controlElements.valueEditor
FluentValueSelector	controlElements.valueSelector

[!TIP]

By default, this package uses icons from @fluentui/react-icons-mdl2 for button labels. To reset button labels to their default strings, use defaultTranslations from react-querybuilder.

<QueryBuilderFluent translations={defaultTranslations}>

Changelog

[v8.0.0] - 2024-11-08

Changed

• [#805] @react-querybuilder/chakra now supports Chakra UI version 3 and no longer supports version 2. For Chakra UI version 2 support, use @react-querybuilder/chakra2.
• [#805] ChakraDragHandle has been removed. In Chakra UI version 3 environments, the default DragHandle component works without augmentation.

Added

• [#814] Debug build which registers the internal Redux store with Redux DevTools (more "debug" functionality may be added in the future). To use the debug build, update all "react-querybuilder" imports to "react-querybuilder/debug".

Fixed

• [#814] The internal Redux store is no longer registered with Redux DevTools by default.
• bootstrapClassnames no longer includes value: "form-control form-control-sm". The classes are added by BootstrapValueEditor only when necessary.
• [#812] @react-querybuilder/bulma properly indicates compatibility with Bulma v1 in its peerDependencies, and the website demo now uses Bulma v1.