@prezly/theme-kit-intl

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.