---
title: useLocale
description: React hook that returns the active BCP 47 locale from the nearest I18nProvider
---

import UtilReference from "@/components/docs/api-reference/UtilReference.astro";
import Demo from "@/components/docs/demos/Demo.astro";
import DocsLink from "@/components/docs/DocsLink.astro";
import FrameworkCase from "@/components/docs/FrameworkCase.astro";
import StyleCase from "@/components/docs/StyleCase.astro";
import BasicUsageDemoReact from "@/components/docs/demos/use-locale/react/css/BasicUsage";
import basicUsageReactTsx from "@/components/docs/demos/use-locale/react/css/BasicUsage.tsx?raw";
import basicUsageReactCss from "@/components/docs/demos/use-locale/react/css/BasicUsage.css?raw";

<FrameworkCase frameworks={["react"]}>

`useLocale` returns the resolved BCP 47 tag from the nearest <DocsLink slug="reference/i18n-provider">`I18nProvider`</DocsLink>, or `'en'` when none is mounted.

Use it when UI copy depends on the active locale outside the translator, for example formatting or caption language hooks.

## Example

Switch the provider locale to see `useLocale` supply the BCP 47 tag used to format a date.

<StyleCase styles={["css"]}>
  <Demo
    files={[
      { title: "App.tsx", code: basicUsageReactTsx, lang: "tsx" },
      { title: "App.css", code: basicUsageReactCss, lang: "css" },
    ]}
  >
    <BasicUsageDemoReact client:idle />
  </Demo>
</StyleCase>

<UtilReference util="useLocale" />

</FrameworkCase>
