---
title: "How to access current locale in React app using react-intl?"
description: "Learn how to access the current locale in your React app using the useIntl hook from react-intl, and where the IntlProvider that supplies that locale is configured."
category: react
date: 2023-03-17
updated: 2026-10-09
canonical: https://localizely.com/i18n-questions/react/how-to-access-current-locale-in-react-app-using-react-intl/
---

# How to access current locale in React app using react-intl?

To access the current locale in a React app using [react-intl](https://www.npmjs.com/package/react-intl), call the `useIntl` hook in any component rendered below the `IntlProvider`. The returned `intl` object exposes the active locale as `intl.locale`, so there is no need to pass the locale down the component tree yourself.

```javascript
const intl = useIntl();
const locale = intl.locale; // e.g. "en"
```

The value comes from the `locale` prop of the `IntlProvider` component configured at the top of the component tree, which is also where the `messages` for that locale are passed in.

```javascript
<IntlProvider locale={locale} messages={messages}>
  <App />
</IntlProvider>
```

It's important to note that in some React applications, the currently selected locale information may be saved on the server. This means that the fetched user data from the server might include such information.

Source: https://localizely.com/i18n-questions/react/how-to-access-current-locale-in-react-app-using-react-intl/