Best practice for adding custom translations to app using Shopify Polaris?

Lull
Excursionist
24 1 3

Hi,

 

I see that the i18n property is set on AppProvider - I assume this translates all text on the react components in Polaris.

How should I go about making custom translations to the remainder of the app - is Polaris using a translations library that it would be best pratice to use for the custom translations, can I just add locations/en.json to the project and reference the translation somehow?
Or should the translations in Polaris and the remainder of the app be kept seperate?

 

Thanks,

-Louise

0 Likes
garyrgilbert
Excursionist
35 3 6

from github AppProvider readme 

  Using translations

Translations are provided in the locales folder. When using Polaris, you are able to import translations from all languages supported by the core Shopify product and consume them through the i18n prop.

If a project has only one locale, then you can pass the JSON content from the locale file into AppProvider.

 

import AppProvider from '@shopify/polaris';
// en.json is English. Replace with fr.json for French, etc
import translations from '@shopify/polaris/locales/en.json';

function App() {
  return <AppProvider i18n={translations}>{/* App content */}</AppProvider>;
}

 

If a project supports multiple locales, then load them dynamically using @shopify/react-i18n. This ensures that you load only the translations you need.

 

 

import AppProvider from '@shopify/polaris';
// en.json is English. Replace with fr.json for French, etc
import translations from '@shopify/polaris/locales/en.json';
import {useI18n} from '@shopify/react-i18n';

function App() {
  const [i18n] = useI18n({
    id: 'Polaris',
    fallback: translations,
    translations(locale) {
      return import(
        /* webpackChunkName: "Polaris-i18n", webpackMode: "lazy-once" */ `@shopify/polaris/locales/${locale}.json`
      ).then((dictionary) => dictionary && dictionary.default);
    },
  });

  // i18n.translations is an array of translation dictionaries, where the first
  // dictionary is the desired language, and the second is the fallback.
  return (
    <AppProvider i18n={i18n.translations}>{/* App content */}</AppProvider>
  );
}

 

0 Likes