97 lines
2.3 KiB
Markdown
97 lines
2.3 KiB
Markdown
# 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→ |