---
title: useTranslate
description: Returns the `I18nTranslate` interface used to translate strings.
api_version: 2023-04
api_name: checkout-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/localization/usetranslate
  md: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/localization/usetranslate.md
---

# use​Translatehook

Returns the `I18nTranslate` interface used to translate strings.

## use​Translate()

### Returns

* I18nTranslate

  ### I18nTranslate

  This returns a translated string matching a key in a locale file.

### I18nTranslate

This returns a translated string matching a key in a locale file.



```ts
export interface I18nTranslate {
  <ReplacementType = string>(
    key: string,
    options?: {[placeholderKey: string]: ReplacementType | string | number},
  ): ReplacementType extends string | number
    ? string
    : (string | ReplacementType)[];
}
```

### Examples

* #### Translating strings

  ##### Description

  Define strings in JSON files for each locale and render them using \`translate()\`. See \[localizing UI extensions]\(/docs/apps/checkout/best-practices/localizing-ui-extensions) for more information.

  ##### React

  ```jsx
  /* See the locales/en.default.json tab for the translation keys and values for this example */
  import React from 'react';
  import {
    render,
    Text,
    useTranslate,
  } from '@shopify/checkout-ui-extensions-react';

  render('Checkout::Dynamic::Render', () => (
    <Extension />
  ));

  function Extension() {
    const translate = useTranslate();
    return (
      <Text>{translate('welcomeMessage')}</Text>
    );
  }
  ```

  ##### locales/en.default.json

  ```json
  {
    "welcomeMessage": "Welcome to our store!"
  }
  ```

## Examples

### Examples

* #### Translating strings with pluralization

  ##### Description

  You can use the \`count\` option to get a pluralized string based on the current locale. See \[localizing UI extensions]\(/docs/apps/checkout/best-practices/localizing-ui-extensions) for more information.

  ##### React

  ```jsx
  /* See the locales/en.default.json tab for the translation keys and values for this example */
  import React from 'react';
  import {
    render,
    Banner,
    useExtensionApi,
    useTranslate,
  } from '@shopify/checkout-ui-extensions-react';

  render('Checkout::Dynamic::Render', () => (
    <Extension />
  ));

  function Extension() {
    const {i18n} = useExtensionApi();
    const translate = useTranslate();

    const points = 10000;
    const formattedPoints =
      i18n.formatNumber(points);
    // Translate the loyalty points message, using pluralization to differentiate messages
    const loyaltyPointsMsg = translate(
      'loyaltyPoints',
      {
        count: points,
        formattedPoints,
      },
    );

    return <Banner title={loyaltyPointsMsg} />;
  }
  ```

  ##### locales/en.default.json

  ```json
  {
    "loyaltyPoints": {
      "one": "You have {{formattedPoints}} loyalty point",
      "other": "You have {{formattedPoints}} loyalty points"
    }
  }
  ```

## Related

[APIs - StandardApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi)

[APIs - CheckoutApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/checkoutapi)

[APIs - OrderStatusApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/orderstatusapi)

[APIs - CartLineDetailsApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/cartlinedetailsapi)

[APIs - PickupPointsApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/pickuppointsapi)

[APIs - PickupLocationsApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/pickuplocationsapi)

[APIs - ShippingMethodDetailsApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/shippingmethoddetailsapi)

[APIs - ExtensionPoints](https://shopify.dev/docs/api/checkout-ui-extensions/apis/extensionpoints)