Translations for Prezly Themes

This repo is a supplementary package for Prezly themes that need multi-language support. It has two main exports:

• Translation files in ICU synthax compiled to work seamlessly with react-intl library and Crowdin.
• Typed message descriptors to use in react-intl FormattedMessage components and formatMessage helpers.

Getting started

npm

npm install react-intl @prezly/theme-kit-intl

Usage in the application

1. Import the messages for your desired locale. localeIsoCode refers to a ISO hyphen-code. You can check which locale codes are supported in the theme-kit-nextjs repo.

const messages = await import(`@prezly/theme-kit-intl/messages/${localeIsoCode}.json`);

2. Pass the messages to the IntlProvider wrapper component. It should be at the top of your component tree to work properly.

<IntlProvider
    locale={localeIsoCode}
    defaultLocale="en"
    messages={messages}
>
  {/* Your application code */}
</IntlProvider>

3. Use the message descriptor to render the message in your component. Your IDE should give hints on the messages structure.

import { translations } from '@prezly/theme-kit-intl';
import { FormattedMessage } from 'react-intl';

function Component() {
  return <FormattedMessage {...translations.actions.download} />
}

You can check an example on how to import messages in a Next.js theme in the Prezly Bea Theme repo.

Message descriptors structure

• actions -> Labels for buttons or links that trigger a specific action
• content -> Mostly titles for various sections of a site that are related to the displayed content in some way
• errors -> Messages for error pages (404/500) and form validation errors
• search -> Messages related to the Search module
• subscription -> Messages related to the Subscription module
• misc -> Messages not suiting in any of the above categories

Documentation on updating the translations (Prezly internal)

The process of adding new translations to Prezly Themes is described in the Notion article

Brought to you by Prezly.