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

useLocale

The useLocale primitive returns the follows properties.