@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.1.0] - 2025-01-09

Added

• [#820] New @react-querybuilder/datetime package with enhanced functionality for managing date/time data. Includes rule/value processors for formatQuery tailored to different database platforms and date/time libraries.
• [#820] formatQuery will assume a format of "sql" if no format is provided as long as preset matches one of the supported values.
• [#820] New formatQuery option wrapValueWith, an array of two strings to act as a prefix and suffix for values (outside of any quotes).
• [#820] formatQuery value processors now accept an optional context parameter, which can be used to pass additional information to the processor.
• [#820] New "mongodb_query" export format. This format is exactly the same as "mongodb" except it returns an actual JSON object instead of a JSON.stringifyd version. The "mongodb" format is deprecated, but will not be removed.
• [#820] Default SCSS stylesheet query-builder.scss now uses @use instead of the deprecated @import.
• [#834] React 19 support (verification only, no meaningful code changes were necessary).