Beta Preview

useLocale

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():

Interface

NameType
direction
The writing direction for the locale.
localestring
The BCP47 language code for the locale.

Example

import {useLocale} from '@react-aria/i18n';

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

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