See https://github.com/prezly/theme-kit-js/tree/main/packages/intl#readme
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.
npm install react-intl @prezly/themes-intl-messages
- 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.
actions
-> Labels for buttons or links that trigger a specific actioncontent
-> Mostly titles for various sections of a site that are related to the displayed content in some wayerrors
-> Messages for error pages (404/500) and form validation errorssearch
-> Messages related to the Search modulesubscription
-> Messages related to the Subscription modulemisc
-> Messages not suiting in any of the above categories
The process of adding new translations to Prezly Themes is described in the Notion article
Brought to you by Prezly.