Localization

Localize field labels, option labels, and surrounding UI in the host application. Built-in action labels can be customized through Builder via strings.

const fields: IBuilderFieldProps[] = [
  {
    field: 'STATE',
    label: 'Stav',
    type: 'LIST',
    operators: ['EQUAL'],
    value: [{ value: 'CZ', label: 'Ceska republika' }],
  },
];

Built-in UI strings

Locales can be imported from their subpaths and passed to the Builder through the strings prop.

import '@vojtechportes/react-query-builder/styles.css';
import { Builder } from '@vojtechportes/react-query-builder';
import { strings } from '@vojtechportes/react-query-builder/locale/fr-FR';

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

Supported locale subpaths:

• @vojtechportes/react-query-builder/locale/en-US — English (United States)
• @vojtechportes/react-query-builder/locale/fr-FR — French (France)
• @vojtechportes/react-query-builder/locale/it-IT — Italian (Italy)
• @vojtechportes/react-query-builder/locale/de-DE — German (Germany)
• @vojtechportes/react-query-builder/locale/es-ES — Spanish (Spain)
• @vojtechportes/react-query-builder/locale/pt-PT — Portuguese (Portugal)
• @vojtechportes/react-query-builder/locale/cs-CZ — Czech (Czechia)
• @vojtechportes/react-query-builder/locale/sk-SK — Slovak (Slovakia)
• @vojtechportes/react-query-builder/locale/zh-CN — Simplified Chinese
• @vojtechportes/react-query-builder/locale/zh-TW — Traditional Chinese

The package-root strings import remains the backward-compatible English (en-US) form. Use it as a base when you only need selective overrides.

import '@vojtechportes/react-query-builder/styles.css';
import { strings } from '@vojtechportes/react-query-builder';

<Builder
  fields={fields}
  data={data}
  strings={{
    ...strings,
    group: {
      ...strings.group,
      addRule: 'Add filter',
      addGroup: 'Add condition group',
    },
    operators: {
      ...strings.operators,
      EQUAL: 'Is exactly',
      NOT_EQUAL: 'Is not',
    },
    validation: {
      ...strings.validation,
      required: 'Please provide a value',
    },
  }}
  onChange={setData}
/>;

// You can override only the keys you need.
// Unspecified labels fall back to the built-in defaults.

• group covers labels such as add, delete, and group mode choices.
• rule covers rule-level action labels.
• textMode covers text-mode labels and messages such as the mode toggle, syntax error prefix, lock warning, and locked-range hover text.
• textMode.sql covers localized SQL parser and syntax-validation messages used by text mode.
• operators lets you rename operator captions shown in selectors.
• validation customizes built-in validation messages.