use
hook
Returns the interface used to translate strings.
Anchor to useTranslateuse
use
I18nTranslate
UseTranslateGeneratedType
Returns the `I18nTranslate` interface used to translate strings.
I18nTranslateexport function useTranslate<
Target extends RenderExtensionTarget = RenderExtensionTarget,
>(): I18nTranslate {
const {i18n} = useApi<Target>();
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)[];
}Was this section helpful?
Translating strings
/* See the locales/en.default.json tab for the translation keys and values for this example */
import {
reactExtension,
Text,
useTranslate,
} from '@shopify/ui-extensions-react/checkout';
export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);
function Extension() {
const translate = useTranslate();
return (
<Text>{translate('welcomeMessage')}</Text>
);
}
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
/* See the locales/en.default.json tab for the translation keys and values for this example */ import { reactExtension, Text, useTranslate, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.block.render', () => <Extension />, ); function Extension() { const translate = useTranslate(); return ( <Text>{translate('welcomeMessage')}</Text> ); }locales/en.default.json
{ "welcomeMessage": "Welcome to our store!" }
Anchor to examplesExamples
Anchor to example-translating-strings-with-pluralizationTranslating strings with pluralization
You can use the count option to get a pluralized string based on the current locale.
See localizing UI extensions for more information.
Was this section helpful?
Translating strings with pluralization
/* See the locales/en.default.json tab for the translation keys and values for this example */
import {
reactExtension,
Banner,
useApi,
useTranslate,
} from '@shopify/ui-extensions-react/checkout';
export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);
function Extension() {
const {i18n} = useApi();
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} />;
}
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
/* See the locales/en.default.json tab for the translation keys and values for this example */ import { reactExtension, Banner, useApi, useTranslate, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.block.render', () => <Extension />, ); function Extension() { const {i18n} = useApi(); 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
{ "loyaltyPoints": { "one": "You have {{formattedPoints}} loyalty point", "other": "You have {{formattedPoints}} loyalty points" } }
