JSPM

  • Created
  • Published
  • Downloads 313
  • Score
    100M100P100Q70450F
  • License MIT

Miniature Polyglot.js-based i18n for React, keeping translation files local to React components a la CSS Modules. Supports Hooks.

Package Exports

  • react-local-translations
  • react-local-translations/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-local-translations) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Local Translations

Define both global, app-wide translations, and local, per-component translations for your React app.

Based on polyglot.js, with a few additions we found sorely lacking while whitelabeling.

npm i react-local-translations

Want the benefits of global translation files? Check out

https://github.com/DeedMob/transform-translations

Usage

See the tests

You wrap your app in an I18n.Provider and then make use of useTranslations or useLocale (we found that plenty of components only use the current locale). For legacy class component use, the translate HOC is also available, with the same signature as useTranslations, except that it passes through different props: t, g, getLocale.

Translate using t (return type of useTranslations, or this.props.t from translate):

t('key'), t.g('global_key'), t.locale, t.has(${thing}_help) ? t(${thing}_help) : ''

We recommend putting translation files in .json, but anything goes. Dynamic stuff is recommended to be in global translations. convertMissingKey and transforms are able to supply additional dynamic stuff.

Releasing updates

Once you've merged in your changes, bump the version appropriately.

Then build & release with:

npm run build
npm publish