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 📆

  • 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 🔠

Feeding components with translations — useLocalizable hook 🪝

Some numbers ⚖️

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




Lead Developer @TDSOFT

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to implement Rest Server in Koa.js

Why You Should Try Out Writing Clones of Famous JavaScript Libraries

Get the final part to the Disgrace trilogy for a special release day price of only 99p/99c

Hadoop Distributed Storage Cluster : “Share Limited Storage of Slave to the Master”

Angular, Jest, Firebase, and Reyrey!

Top 5 Frameworks for Node.js

Front-End Web Development Roadmap

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
Adrian Celczyński

Adrian Celczyński

Lead Developer @TDSOFT

More from Medium

Prototype A React App with Firebase Authentication Quickly

Reduce your API calls while searching using Debouncing

Persisted Data With Redux and LocalStorage — The Proper Way 2022

What is the Redux & Context API?