Customization

Fluent UI

Use the Fluent UI adapter when your application is built on Fluent UI React 8 and you want builder controls mapped to that component set.

Available entrypoint

@vojtechportes/react-query-builder/fluentui/v8 targets @fluentui/react 8.x and is available in the demo.

Installing Fluent UI

Install the matching Fluent UI peer dependency before using the adapter.

Fluent UI v8 peers

npm install @fluentui/react@^8.125.6

Using Fluent UI v8

Fluent UI v8 adapter

import '@vojtechportes/react-query-builder/styles.css';
import {
  Builder,
  type DenormalizedQuery,
} from '@vojtechportes/react-query-builder';
import { components } from '@vojtechportes/react-query-builder/fluentui/v8';

export const MyFluentUiBuilder = () => {
  const [data, setData] = useState<DenormalizedQuery>(initialData);

  return (
    <Builder
      data={data}
      fields={fields}
      components={components}
      onChange={setData}
    />
  );
};

Extending the Fluent UI adapter

Merging Fluent UI defaults

import '@vojtechportes/react-query-builder/styles.css';
import {
  Builder,
  type DenormalizedQuery,
} from '@vojtechportes/react-query-builder';
import {
  createFluentUiComponents,
  components as fluentUiComponents,
} from '@vojtechportes/react-query-builder/fluentui/v8';

const components = createFluentUiComponents(fluentUiComponents, {
  form: {
    Input: MyInput,
  },
  Add: MyAddButton,
});

export const MyFluentUiBuilder = () => {
  const [data, setData] = useState<DenormalizedQuery>(initialData);

  return (
    <Builder
      data={data}
      fields={fields}
      components={components}
      onChange={setData}
    />
  );
};