# useTranslate
Returns the `I18nTranslate` interface used to translate strings.
### Translating strings

```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>
  );
}

```

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

```


## 

### UseTranslateGeneratedType
Returns the `I18nTranslate` interface used to translate strings.
#### Returns: I18nTranslate

export function useTranslate<
  ID extends RenderExtensionPoint = RenderExtensionPoint,
>(): I18nTranslate {
  const {i18n} = useApi<ID>();

  const translate = useCallback<I18nTranslate>(
    (...args) => {
      const translation = i18n.translate(...args);

      if (!Array.isArray(translation)) {
        return translation as any;
      }

      return translation.map((part, index) => {
        if (isValidElement(part)) {
          // eslint-disable-next-line react/no-array-index-key
          return cloneElement(part as RemoteComponentType<any>, {key: index});
        }
        return part;
      });
    },
    [i18n],
  );

  return translate;
}
### I18nTranslate
This returns a translated string matching a key in a locale file.
export interface I18nTranslate {
  <ReplacementType = string>(
    key: string,
    options?: {[placeholderKey: string]: ReplacementType | string | number},
  ): ReplacementType extends string | number
    ? string
    : (string | ReplacementType)[];
}
## Related
- [StandardApi](/docs/api/checkout-ui-extensions/apis/standardapi)
- [CheckoutApi](/docs/api/checkout-ui-extensions/apis/checkoutapi)
- [OrderStatusApi](/docs/api/checkout-ui-extensions/apis/orderstatusapi)
- [CartLineDetailsApi](/docs/api/checkout-ui-extensions/apis/cartlinedetailsapi)
- [PickupPointsApi](/docs/api/checkout-ui-extensions/apis/pickuppointsapi)
- [PickupLocationsApi](/docs/api/checkout-ui-extensions/apis/pickuplocationsapi)
- [ShippingMethodDetailsApi](/docs/api/checkout-ui-extensions/apis/shippingmethoddetailsapi)
- [ExtensionPoints](/docs/api/checkout-ui-extensions/apis/extensionpoints)
## Examples
Returns the `I18nTranslate` interface used to translate strings.
### 

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.
      
### Translating strings with pluralization

```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} />;
}

```

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

```