useLocale
Returns the current locale and layout direction.
install | yarn add react-aria |
---|---|
version | 3.33.1 |
usage | import {useLocale} from 'react-aria' |
Introduction#
useLocale
allows components to access the current locale and interface layout direction.
By default, this is automatically detected based on the browser or system language, but it can
be overridden by using the I18nProvider at the root of your app.
useLocale
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.
API#
useLocale(): Locale
Interface#
Name | Type | Description |
locale | string | The BCP47 language code for the locale. |
direction | Direction | The writing direction for the locale. |
Example#
import {useLocale} from 'react-aria';
function YourApp() {
let { locale, direction } = useLocale();
return (
<div lang={locale} dir={direction}>
{/* your app here */}
</div>
);
}
import {useLocale} from 'react-aria';
function YourApp() {
let { locale, direction } = useLocale();
return (
<div lang={locale} dir={direction}>
{/* your app here */}
</div>
);
}
import {useLocale} from 'react-aria';
function YourApp() {
let {
locale,
direction
} = useLocale();
return (
<div
lang={locale}
dir={direction}
>
{/* your app here */}
</div>
);
}