Localization

The library provides three built-in locales:

• English
• Chinese
• German

You can also apply a custom locale.

Default locale

The English locale is applied by default

Applying locales

To apply a built-in locale, import the Locale object from "@svar-ui/react-core", the locale package from "@svar-ui/core-locales", and a built-in locale from "@svar-ui/filter-locales", and then add the words prop for the required language to the Locale component. Then, wrap FilterBuilder with the Locale component.

Example:

import { Locale } from "@svar-ui/react-core";
import { cn } from "@svar-ui/filter-locales";
import { cn as cnCore } from "@svar-ui/core-locales";
import { FilterBuilder } from "@svar-ui/react-filter";
import "@svar-ui/react-filter/all.css";

function App({ fields }) {
  return (
    <Locale words={{ ...cn, ...cnCore }}>
      <FilterBuilder fields={fields} />
    </Locale>
  );
}

To apply a custom locale, you need to create an object for the custom locale (or modify the existing one) and provide translations for all Filter text labels (it can be any language you need). You also need to add labels from the core and calendar components ("@svar-ui/core-locales"). Refer to Core localization for more details.

Example for the Korean language:

import { Locale } from "@svar-ui/react-core";
import { FilterBuilder } from "@svar-ui/react-filter";

const ko = {
  filter: {
    "Add filter": "필터 추가",
    "Add group": "그룹 추가",
  },
  core: {
    // provide core translations here
  },
  calendar: {
    // provide calendar translations here
  }
};

function App({ fields }) {
  return (
    <Locale words={{ ...ko }}>
      <FilterBuilder fields={fields} />
    </Locale>
  );
}