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 component from "@svar-ui/react-core", the core locale package from "@svar-ui/core-locales", and a built-in filter locale from "@svar-ui/filter-locales", then pass the words prop for the required language to the Locale component. 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, create an object for the custom locale (or modify an existing one) and provide translations for all Filter text labels. You also need to include 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>
  );
}

Refer to the Core localization guide for more details: https://docs.svar.dev/react/core/guides/localization.