Components

export interface IBuilderComponentsProps {
  Alert?: React.ComponentType<IAlertProps>;
  form?: {
    Select?: React.ComponentType<ISelectProps>;
    SelectMulti?: React.ComponentType<ISelectMultiProps>;
    Switch?: React.ComponentType<ISwitchProps>;
    Input?: React.ComponentType<IInputProps>;
  };
  Remove?: React.ComponentType<IButtonProps>;
  Add?: React.ComponentType<IButtonProps>;
  OutlinedButton?: React.ComponentType<IButtonProps>;
  TextModeToggleContent?: React.ComponentType<ITextModeToggleContentProps>;
  TextModeEditor?: React.ComponentType<ITextModeEditorProps>;
  TextModeInput?: React.ComponentType<ITextModeInputProps>;
  CloneButton?: React.ComponentType<ICloneButtonProps>;
  LockToggle?: React.ComponentType<ILockToggleProps>;
  HistoryControls?: React.ComponentType<IHistoryControlsProps>;
  Rule?: React.ComponentType<IRuleContainerProps>;
  Group?: React.ComponentType<IGroupContainerProps>;
  GroupHeaderOption?: React.ComponentType<IGroupHeaderOptionProps>;
  Text?: React.ComponentType<React.ComponentProps<typeof Text>>;
  DropZone?: React.ComponentType<IDropZoneProps>;
  EmptyGroupDropZone?: React.ComponentType<IEmptyGroupDropZoneProps>;
  Popover?: React.ComponentType<IPopoverProps>;
  PopoverItem?: React.ComponentType<IPopoverItemProps>;
}

export interface ITextModeEditorProps {
  value: string;
  diagnostics: ITextModeDiagnostic[];
  protectedRanges?: ITextModeProtectedRange[];
  protectedRangesMessage?: string | null;
  protectedRangeHoverMessage?: string | null;
  errorMessage: string | null;
  colorScheme?: 'light' | 'dark';
  readOnly?: boolean;
  onChange: (value: string) => void;
}

export interface ITextModeInputProps {
  value: string;
  onChange: (value: string) => void;
  className?: string;
  inputClassName?: string;
  disabled?: boolean;
  readOnly?: boolean;
  spellCheck?: boolean;
  inputDataTest?: string;
}

export interface ICloneButtonProps {
  nodeType: 'rule' | 'group';
  disabled?: boolean;
  onClick?: () => void;
  className?: string;
  title?: string;
  'data-test'?: string;
}

export type BuilderLockState = 'unlocked' | 'self' | 'all';

export interface ILockToggleProps {
  state: BuilderLockState;
  nodeType: 'rule' | 'group';
  disabled?: boolean;
  onChange?: (nextState: BuilderLockState) => void;
  className?: string;
  title?: string;
  'data-test'?: string;
}

export interface IHistoryControlsProps {
  undoButton: React.ReactNode;
  redoButton: React.ReactNode;
  canUndo: boolean;
  canRedo: boolean;
  onUndo: () => void;
  onRedo: () => void;
  className?: string;
}

Props

• Alert Replaces the built-in alert component used for builder-level notices such as blocked text mode.
• form.Select / form.SelectMulti / form.Switch / form.Input Replace the built-in form controls used by rules and groups.
• Remove and Add Replace action buttons used for structural editing.
• OutlinedButton Replaces the built-in outlined action button used by undo, redo, and the builder/text mode toggle.
• TextModeToggleContent Replaces the label-and-icon content rendered inside the builder/text mode toggle button.
• TextModeEditor Replaces the whole text-mode editor surface. This is the integration point for Monaco and other advanced editors.
• TextModeInput Replaces only the input layer used by the built-in text editor.
• CloneButton Replaces the built-in clone control used when cloneable is enabled.
• LockToggle Replaces the built-in lock control used when lockable is enabled.
• HistoryControls Replaces the layout wrapper around the built-in undo and redo controls used when history controls are enabled.
• Rule and Group Replace the main structural containers.
• GroupHeaderOption Replaces the header option control used in group UIs.
• Text Replaces the built-in text rendering component.
• DropZone and EmptyGroupDropZone Replaces drag-and-drop target renderers.
• Popover and PopoverItem Replaces the popover UI used by group creation mode where relevant.

Key prop contracts

• form.Input Receives type, value, onChange(value), and optional disabled, id, and name.
• form.Select Receives values, selectedValue, emptyValue, and onChange(value).
• form.SelectMulti Receives selectedValue, values, onChange(value), and onDelete(value).
• form.Switch Receives switched, optional onChange(value), and optional disabled.
• TextModeEditor Receives the current SQL text, diagnostics, optional protected ranges, an optional hover message, the Builder's optional colorScheme, and onChange(value).
• TextModeInput Receives the current text value plus controlled input props such as disabled, readOnly, and class names used by the built-in text-mode layout.
• CloneButton Receives nodeType, optional disabled, and onClick().
• LockToggle Receives state, nodeType, optional disabled, and onChange(nextState).
• HistoryControls Receives built-in undoButton and redoButton nodes plus canUndo, canRedo, onUndo(), and onRedo().
• Rule Receives already-built children, controls, and optional dragHandle.
• Group Receives controlsLeft, controlsRight, children, and optional overlays or drag handles.
• DropZone Receives id, index, optional parentId, and drag-state flags.
• EmptyGroupDropZone Receives the target group id plus drag-state flags for empty containers.

Monaco subpackage

import '@vojtechportes/react-query-builder/styles.css';
import { createMonacoComponents } from '@vojtechportes/react-query-builder/monaco';
import { components as muiComponents } from '@vojtechportes/react-query-builder/mui/v9';

const components = createMonacoComponents(muiComponents);

<Builder
  fields={fields}
  data={data}
  textMode
  components={components}
  onChange={setData}
/>;

• @vojtechportes/react-query-builder/monaco Exports createMonacoComponents, createMonacoComponentSet, and MonacoTextModeEditor.
• Stylesheet Import @vojtechportes/react-query-builder/styles.css exactly once for both the builder and Monaco integration. The Monaco subpackage does not add another CSS asset.
• Styling hooks Use public --query-builder-* variables or the stable .rqb-monaco-text-mode-editor surface class. Generated rqb_[local]_[hash] classes are private.
• Color scheme An explicit Builder colorScheme reactively selects the packaged light or dark Monaco theme. Both themes use the same query-builder palette roles as the built-in SQL editor for keywords, operators, delimiters, strings, numbers, predefined values, and identifiers. An undefined scheme uses the packaged light theme. Monaco's standalone theme service is global, so the latest mounted packaged editor, or the editor whose scheme changes most recently, wins across all mounted Monaco editors.
• Peer dependency monaco-editor is optional and only required when you use that subpackage.
• When to use it Prefer it when text mode must preserve locked rules or groups through protected editor ranges.
• Protected ranges Monaco text mode can render locked SQL fragments as dimmed protected ranges with hover messaging while still allowing edits around them.