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 andformatMessage
helpers.
Getting started
npm
npm install react-intl @prezly/themes-intl-messages
Usage in the application
- 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/themes-intl-messages/messages/${localeIsoCode}.json`);
- 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>
- Use the message descriptor to render the message in your component. Your IDE should give hints on the messages structure.
import translations from '@prezly/themes-intl-messages';
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.