useTranslate

Returns the `I18nTranslate` interface used to translate strings.

/* 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', () => (
  
));

function Extension() {
  const translate = useTranslate();
  return (
    {translate('welcomeMessage')}
  );
}

{
  "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
• CheckoutApi
• OrderStatusApi
• CartLineDetailsApi
• PickupPointsApi
• PickupLocationsApi
• ShippingMethodDetailsApi
• 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.

/* 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', () => (
  
));

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

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

/* 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', () => (
  
));

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

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