Skip to main content

useLocalization

The useLocalization hook returns the locale, country, and language of the current page. It can be used within server or client components and it must be a descendent of a ShopifyProvider component.

Example code​

import {useLocalization, gql} from '@shopify/hydrogen';

export function MyComponent() {
  const {country, locale, language} = useLocalization();

  const query = gql`
    query ProductPriceMax($country: CountryCode) @inContext(country: $country) {
      productByHandle(handle: "1234") {
        priceRange {
          maxVariantPrice {
            amount
            currencyCode
          }
        }
      }
    }
  `;

  const {data} = useShopQuery({
    query,
    variables: {
      country: country.isoCode,
    },
  });

  return {
    /* Your JSX*/
  };
}

Return value​

This hook returns an object with the following properties:

PropertyDescription
countryAn object with the country's isoCode.
languageAn object with the language's isoCode.
localeThe locale string based on country and language. See how we determine locale.

Determine the locale for i18n​

We use the assigned language and countryCode in the ShopifyProvider to determine the locale.

If the language doesn't contain language tag extensions, then we try to merge language and countryCode. For example, if language is EN (English) and countryCode is US (United States), then locale is EN-US.

Alternatively if the language contains a language tag extension, then we use it directly as locale. For example, if language is PT_BR (Brazilian Portuguese) and countryCode is US (United States), then locale is PT_BR