LocaleProvider

Languages supported

Minimum supported version	Language
v0.0.1	Simplified Chinese: zh_CN
v0.7.0	English: en_GB, Japanese: ja_JP, Korean: ko_KR
v1.8.0	Arabic: ar
v1.11.0	Vietnamese: vi_VN、Russian: ru_RU、Indonesian: id_ID、Malay: ms_MY、Thai: th_TH、Turkish: tr_TR
v1.17.0	Portuguese: pt_BR
v1.28.0	Traditional Chinese: zh_TW
v2.2.0	Spanish: es
v2.15.0	Italian: it、French：fr、German：de
v2.21.0	Romanian: ro
v2.29.0	Swedish: sv_SE、 Polish: pl_PL、Dutch: nl_NL
v2.88.0	Azerbaijani: az, Bulgarian: bg, Catalan: ca, Czech: cs_CZ, Cebu: ceb_PH, Danish: da, Greek: el_GR, Spanish (Latin America): es_419, Estonian: et, Persian: fa_IR, Filipino: fil_PH, Finnish: fi_FI, French (Canada): fr_CA, Irish: ga, Hebrew: he_IL, Hindi: hi_IN, Croatian: hr, Hungarian: hu_HU, Icelandic: is, Javanese: jv_ID, Kazakh: kk, Khmer: km_KH, Lithuanian: lt, Latvian: lv, Burmese: my_MM, Norwegian: nb, Portuguese: pt, Slovak: sk, Slovenian: sl, Albanian: sq, Swahili: sw, Ukrainian: uk_UA, Urdu: ur, Uzbek: uz

Components supported

Calendar、Cascader、Chat、DatePicker、Form、Image、List、Modal、Navigation、Nav、Pagination、Popconfirm、Select、Table、TimePicker、Transfer、Tree、TreeSelect、Typography、Upload

How to use

LocaleProvider passes the locale pack to its descendants through context, and you only need to wrap the periphery of the application once to take effect globally.
When you need to switch the language, bind locale to state that changes; the subtree updates automatically.

<script lang="ts">
    import en_GB from '@fibrae/semi-foundation/locale/source/en_GB';
    import { LocaleProvider } from '@fibrae/semi-ui-svelte';
</script>

<LocaleProvider locale={en_GB}>
    <App />
</LocaleProvider>

When locale is omitted, LocaleProvider inherits the language of the outer LocaleProvider; without any outer provider, zh_CN is used. The locale of ConfigProvider takes precedence over LocaleProvider.

Code example

Internationalization

Total pages: 10
Items per page: 10

合計ページ数：10
1ページあたりのアイテム数：10

Code

<script lang="ts">
    import en_GB from '@fibrae/semi-foundation/locale/source/en_GB';
    import ja_JP from '@fibrae/semi-foundation/locale/source/ja_JP';
    import { LocaleProvider, Pagination } from '@fibrae/semi-ui-svelte';
</script>

<LocaleProvider locale={en_GB}>
    <Pagination showSizeChanger showTotal style="margin: 20px" total={100} />
</LocaleProvider>
<LocaleProvider locale={ja_JP}>
    <Pagination showSizeChanger showTotal style="margin: 20px" total={100} />
</LocaleProvider>

Custom Internationalization Component

When your custom component also wants to consume the localeCode in the Semi LocaleProvider or read the i18n text of a specific component, use LocaleConsumer. Its children snippet receives { locale, localeCode, dateFnsLocale, currency }. During component initialisation, you can also call useLocale(componentName), which returns a getter; call it to read the same four fields. The language priority is ConfigProvider, LocaleProvider, then zh_CN. Custom namespaces (ComponentA in the example) extend the Locale type through declaration merging.

zh-CN : 开始时间

ko-KR : 시작 시간

en-GB : Start Time

semi

design

dsm

Code

<script lang="ts" module>
    // Custom component text joins the Locale type through declaration merging
    declare module '@fibrae/semi-foundation/locale/interface' {
        export interface Locale {
            ComponentA: { customKey: string };
        }
    }
</script>

<script lang="ts">
    import en_GB from '@fibrae/semi-foundation/locale/source/en_GB';
    import ko_KR from '@fibrae/semi-foundation/locale/source/ko_KR';
    import zh_CN from '@fibrae/semi-foundation/locale/source/zh_CN';
    import { LocaleConsumer, LocaleProvider } from '@fibrae/semi-ui-svelte';

    const locales = [
        { ...zh_CN, ComponentA: { customKey: 'semi' } },
        { ...ko_KR, ComponentA: { customKey: 'design' } },
        { ...en_GB, ComponentA: { customKey: 'dsm' } },
    ];
</script>

{#each locales as locale (`semi-${locale.code}`)}
    <LocaleProvider {locale}>
        <LocaleConsumer componentName="TimePicker">
            {#snippet children({ locale: timePicker, localeCode })}
                <div>{localeCode} : {timePicker.begin}</div>
            {/snippet}
        </LocaleConsumer>
    </LocaleProvider>
{/each}
{#each locales as locale (`custom-${locale.code}`)}
    <LocaleProvider {locale}>
        <LocaleConsumer componentName="ComponentA">
            {#snippet children({ locale: componentA })}
                <div>{componentA.customKey}</div>
            {/snippet}
        </LocaleConsumer>
    </LocaleProvider>
{/each}

Components that support multilingualism

The example gives all the current multilingual components

When your site needs RTL support, use ConfigProvider directly: besides locale, it also configures direction='rtl'/'ltr'.
Without RTL needs, LocaleProvider is enough.

API Reference

Props

Property	Description	Type	Default
children	Subtree that uses the locale pack.	`Snippet`	-
locale	Locale pack. When omitted, undefined or null, the language of the outer LocaleProvider is inherited; without any outer provider, components fall back to zh_CN. The locale of ConfigProvider takes precedence over it.	`Locale \| null`	-

LocaleProvider renders no DOM element, so class, style and native attributes and events are not applied to the page.

LocaleConsumer

Props

Property	Description	Type	Default
children	Snippet receiving `{ locale, localeCode, dateFnsLocale, currency }`, where locale is the text of componentName.	`Type`	-
componentName	Namespace of the locale pack to read, such as TimePicker. Only component names declared in Locale are accepted; extend Locale by declaration merging for custom namespaces.	`K`	-

LocaleConsumer renders no element of its own, so class, style and native attributes and events are not applied to the page.

useLocale

useLocale(componentName) returns a () => LocaleResult getter; call it to read the result. componentName can be a string or a function that returns a string.

Field	Description	Type
locale	Text of the namespace named by `componentName`	`Locale[K]`
localeCode	Language code	string
dateFnsLocale	date-fns locale object; date-fns uses its default enUS when it is missing	`Locale` (date-fns)
currency	ISO 4217 currency code of the language's region	string

LocaleProvider

Languages supported

Components supported

How to use

Code example

Internationalization

Custom Internationalization Component

Components that support multilingualism

Pagination

Modal

Select & Cascader

DatePicker

TimePicker

TreeSelect

Table

Table - Empty

List - Empty

Calendar

Typography - Copyable

Typography - Collapsible

Transfer

Image

Form

Navigation

API Reference

LocaleProvider

LocaleConsumer

useLocale