# @commercetools-frontend/i18n > MC i18n messages Latest version **27.17.0** (published 2026-11-03) · MIT license · 0 weekly downloads ## Install ```sh npm install @commercetools-frontend/i18n pnpm add @commercetools-frontend/i18n yarn add @commercetools-frontend/i18n bun add @commercetools-frontend/i18n ``` ## Health **Score 65/100 (B)** — status: active. Positive: esm support; no vulnerabilities; has provenance; recently updated; high maintenance score. Warnings: low downloads; no types. ## Facts | | | |---|---| | Version | 27.17.0 | | Published | 2026-11-03 | | First published | 2018-06-25 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | ESM + CommonJS | | Dependencies | 11 | | Unpacked size | 427 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Provenance | attested (GitHub Actions) | | GitHub stars | 78 | | Maintainers | tdeekens, emmenko, commercetools-admin | | Keywords | javascript, frontend, react, toolkit | ## Links - npm: https://www.npmjs.com/package/@commercetools-frontend/i18n - Repository: https://github.com/commercetools/merchant-center-application-kit - Homepage: https://docs.commercetools.com/merchant-center-customizations - Issues: https://github.com/commercetools/merchant-center-application-kit/issues - npm.io page: https://npm.io/package/@commercetools-frontend/i18n ## Dependencies (11) - [moment](https://npm.io/package/moment.md) ^2.29.4 - [prop-types](https://npm.io/package/prop-types.md) 15.8.1 - [@types/react](https://npm.io/package/@types/react.md) ^19.0.3 - [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.22.15 - [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.14.0 - [@types/prop-types](https://npm.io/package/@types/prop-types.md) ^15.7.5 - [@babel/runtime-corejs3](https://npm.io/package/@babel/runtime-corejs3.md) ^7.22.15 - [@commercetools-uikit/i18n](https://npm.io/package/@commercetools-uikit/i18n.md) ^20.6.7 - [@commercetools-frontend/sentry](https://npm.io/package/@commercetools-frontend/sentry.md) ^27.17.0 - [@commercetools-community-kit/i18n](https://npm.io/package/@commercetools-community-kit/i18n.md) ^0.3.0 - [@formatjs/icu-messageformat-parser](https://npm.io/package/@formatjs/icu-messageformat-parser.md) 2.11.4 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 27.17.0 (latest) — 2026-11-03 - 0.0.0-canary-20261106194334 (canary) — 2026-11-06 - 0.0.0-changesets-ghcommit-temp-changeset-release-main-20261103220908 (changesets-ghcommit-temp-changeset-release-main) — 2026-11-03 - 0.0.0-fec-1395-sentry-graphql-spans-20261103191331 (fec-1395-sentry-graphql-spans) — 2026-11-03 - 0.0.0-FEC-1433-content-skeleton-early-shell-20261016130021 (FEC-1433-content-skeleton-early-shell) — 2026-10-16 - 0.0.0-fix-preview-publish-on-push-20261006164301 (fix-preview-publish-on-push) — 2026-10-06 - 0.0.0-save-toolbar-cqw-v2-20260908184114 (save-toolbar-cqw-v2) — 2026-09-08 - 0.0.0-FEC-1297-part-1-bundle-json-output-mode-20260904143500 (FEC-1297-part-1-bundle-json-output-mode) — 2026-09-04 - 0.0.0-fix-nimbus-optional-build-4030-20260708142501 (fix-nimbus-optional-build-4030) — 2026-07-08 - 0.0.0-FEC-1017-shell-splitter-region-20260618140924 (FEC-1017-shell-splitter-region) — 2026-06-18 - 0.0.0-fix-serialize-javascript-20260428090559 (fix-serialize-javascript) — 2026-04-28 - 0.0.0-CRAFT-2074-eslint9-migration-core-20260227150731 (CRAFT-2074-eslint9-migration-core) — 2026-02-27 - 0.0.0-CRAFT-2080-app-kit-i-18-n-date-format-incorrect-for-regional-english-locales-en-be-en-ie-etc-20260202153139 (CRAFT-2080-app-kit-i-18-n-date-format-incorrect-for-regional-english-locales-en-be-en-ie-etc) — 2026-02-02 - 0.0.0-CRAFT-2074-eslint-v9-migration-new-pkg-20260130195951 (CRAFT-2074-eslint-v9-migration-new-pkg) — 2026-01-30 - 0.0.0-CRAFT-1995-upgrade-sentry-react-20251211194319 (CRAFT-1995-upgrade-sentry-react) — 2025-12-11 - … 1854 more at https://npm.io/package/@commercetools-frontend/i18n/versions ## README # @commercetools-frontend/i18n

Latest release (latest dist-tag) Latest release (next dist-tag) Minified + GZipped size GitHub license

This package contains JSON data about the i18n messages from the different application-kit packages (e.g. `application-shell`, etc). Additionally, it also loads locale data for `moment` and `react-intl`, which is necessary for runtime usage. ## Install ```bash $ npm install --save @commercetools-frontend/i18n ``` ## Supported locales - `en` - `de` - `es` - `fr-FR` - `pt_BR` ## Usage > The `` component, or the `useAsyncLocaleData` hook, are internally used by the `` and there is no need to use them directly. > If you do need to load translation files asynchronously, we expose an additional hook `useAsyncIntlMessages` that you can use for that. > The difference between those is that the "async locale data" components additionally load the application-kit and ui-kit messages, as well as the moment locales. ### Using a React component with render props **With static messages** ```js import { IntlProvider } from 'react-intl'; import { AsyncLocaleData } from '@commercetools-frontend/i18n'; const myApplicationMessages = { en: { Title: 'Application Title', }, }; const Application = (props) => ( {({ isLoading, locale, messages }) => { if (isLoading) return null; return ( ... ); }} ); ``` **With dynamic loaded messages (code splitting)** ```js import { IntlProvider } from 'react-intl'; import { AsyncLocaleData, parseChunkImport, } from '@commercetools-frontend/i18n'; const loadMessages = (lang) => { let loadAppI18nPromise; switch (lang) { case 'de': loadAppI18nPromise = import( './i18n/data/de.json' /* webpackChunkName: "app-i18n-de" */ ); break; case 'es': loadAppI18nPromise = import( './i18n/data/es.json' /* webpackChunkName: "app-i18n-es" */ ); break; default: loadAppI18nPromise = import( './i18n/data/en.json' /* webpackChunkName: "app-i18n-en" */ ); } return loadAppI18nPromise.then( (result) => parseChunkImport(result), (error) => { // eslint-disable-next-line no-console console.warn( `Something went wrong while loading the app messages for ${lang}`, error ); return {}; } ); }; const Application = (props) => ( {({ isLoading, locale, messages }) => { if (isLoading) return null; return ( ... ); }} ); ``` ### Using a React hook Similarly to the ``, we also expose a React hook. ```js import { IntlProvider } from 'react-intl'; import { useAsyncLocaleData } from '@commercetools-frontend/i18n'; const Application = (props) => { const { isLoading, locale, messages } = useAsyncLocaleData({ locale: props.locale, applicationMessages: loadMessages, }); if (isLoading) return null; return ( ... ); }; ``` ## Generating translation files After you have defined the `intl` messages in your React components, you should extract those messages into the source file `core.json`. This file contains a key-value map of the message `id` and the message value. To extract the messages simply run `pnpm extract-intl`. ## Syncing translations with Transifex We use [Transifex](https://www.transifex.com/) as our translation tool. Once we have extracted new messages into the source file `core.json` (see `mc-scripts extract-inl`) and pushed/merged to `main`, the file will be automatically synced with Transifex using the [Transifex GitHub Integration](https://docs.transifex.com/integrations/transifex-github-integration). Translations that have been **reviewed** in Transifex will be automatically pushed back to GitHub by the Transifex Bot via a Pull Request. ## Shared messages This package exposes some "shared" messages that can be used for different things like buttons, etc. instead of having duplicated messages. The messages are exported as `sharedMessages` property. --- _Source: https://npm.io/package/@commercetools-frontend/i18n · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._