# 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`<br> The locale to apply to the children. |
| children | `JSX.Element`<br> The contents that should have the locale applied. |

### useLocale

The `useLocale` primitive returns the follows properties.

| Name | Description |
| --- | --- |
| locale | `Accessor<string>`<br> The [BCP47](https://www.ietf.org/rfc/bcp/bcp47.txt) language code for the locale. |
| direction | `Accessor<Direction>`<br> The writing direction for the locale. |

Previous[←Tooltip](https://kobalte.dev/docs/core/components/tooltip)Next→