use
hook
Returns the interface used to translate strings.
Anchor to useTranslateuse
use
I18nTranslate
I18nTranslate
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 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>
);
}
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 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
{ "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 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} />;
}
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 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
{ "loyaltyPoints": { "one": "You have {{formattedPoints}} loyalty point", "other": "You have {{formattedPoints}} loyalty points" } }
