PettyUI/.firecrawl/kobalte.dev-docs-core-components-i18n-provider.md

I18nProvider

Provides the locale for the application to all child components.

Import

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

Copytsx
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.

Copytsx
import { I18nProvider } from "@kobalte/core/i18n";

<I18nProvider locale="fr-FR">
	<YourApp />
</I18nProvider>;

Copytsx
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.

Copytsx
import { useLocale } from "@kobalte/core/i18n";

function YourApp() {
	const { locale, direction } = useLocale();

	return (
		<div lang={locale()} dir={direction()}>
			{/* your app here */}
		</div>
	);
}

Copytsx
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

Prop	Description
locale	string The locale to apply to the children.
children	JSX.Element The contents that should have the locale applied.

useLocale

The useLocale primitive returns the follows properties.

Name	Description
locale	Accessor<string> The BCP47 language code for the locale.
direction	Accessor<Direction> The writing direction for the locale.

Previous←TooltipNext→