Dynamic i18n in React 17

Photo by Sigmund on Unsplash
  • Send localizable strings through the network by your backend
  • Bundle it 😏

Dynamic import of Locale files for date strings 📆

We use date-fns for date formatting. Implementation is quite straightforward:

  • Dynamic import from node_modules/date-fns/Locale directory — let webpack handle everything. Nice thing to do is to add webpackChunkName with i18n prefix so it’s not only numbers that show in the network tab.
  • MobX store that triggers the import on mount

Dynamic import of UI Localizable Strings 🔠

I thought it would be efficient to keep default en-GB translations inside the components, so they can serve also as the keys of localizable strings. We import localizable strings on mount, but it is fast enough that they are available before the first paint.

Feeding components with translations — useLocalizable hook 🪝

Some numbers ⚖️

i18next packages (not including translations):

  • i18next — 33kb minified
  • i18next react — 18.9kB minified
  • useLocalizible hook — 9KB minified
  • locale store — 9KB minified

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store