Kobalte.v0.13.4

I18nProvider

Provides the locale for the application to all child components.

Import

tsx
import { I18nProvider, useLocale } from "@kobalte/core/i18n";
// or (deprecated)
import { I18nProvider, useLocale } from "@kobalte/core";
tsx
import { I18nProvider, useLocale } from "@kobalte/core/i18n";
// or (deprecated)
import { I18nProvider, useLocale } from "@kobalte/core";

Usage

I18nProvider allows you to override the default locale as determined by the browser/system setting with a locale defined by your application (e.g. application setting).

This should be done by wrapping your entire application in the provider, which will cause all child elements to receive the new locale information via the useLocale primitive.

tsx
import { I18nProvider } from "@kobalte/core/i18n";
<I18nProvider locale="fr-FR">
<YourApp />
</I18nProvider>;
tsx
import { I18nProvider } from "@kobalte/core/i18n";
<I18nProvider locale="fr-FR">
<YourApp />
</I18nProvider>;

The useLocale primitive

useLocale allows components to access the current locale and interface layout direction. It should be used in the root of your app to define the lang and dir attributes so that the browser knows which language and direction the user interface should be rendered in.

tsx
import { useLocale } from "@kobalte/core/i18n";
function YourApp() {
const { locale, direction } = useLocale();
return (
<div lang={locale()} dir={direction()}>
{/* your app here */}
</div>
);
}
tsx
import { useLocale } from "@kobalte/core/i18n";
function YourApp() {
const { locale, direction } = useLocale();
return (
<div lang={locale()} dir={direction()}>
{/* your app here */}
</div>
);
}

API reference

I18nProvider

PropDescription
localestring
The locale to apply to the children.
childrenJSX.Element
The contents that should have the locale applied.

useLocale

The useLocale primitive returns the follows properties.

NameDescription
localeAccessor<string>
The BCP47 language code for the locale.
directionAccessor<Direction>
The writing direction for the locale.
Previous
Tooltip