How to add internationalization 📙 to your React App ⚛️ in a SUPER-simple way

If you want to translate your Single Page Application to other languages without much hassle - this short guide might be for you.

Internationalization (i18n for short) is not a trivial topic and it is perfectly fine to avoid it unless you need it 😎

At SwissDev Jobs we came to the point where we would like to not only have an English version of our website but also German, French and perhaps Italian (Switzerland has 4 languages to support).

I18n is a new topic for us, so we started researching how to do it in a React application with 2 criteria in mind:

1. Easy learning curve - we do NOT want to spend next 4 weeks learning a new framework or library but want a solution that works NOW
2. Minimal impact on performance - adding i18n should not blow our bundle size or make the app slower

During the research, we quickly noticed that the existing popular frameworks do not met those requirements.

For example:
react-intl (probably the most popular i18n library for React with over 11k stars on Github) has a minified bundle size of 46.6 kB and a lot of features that we don't need.

As we continued our research, we asked ourselves - what is really needed for supporting multiple languages and then it struck us:

We only need a 2 level dictionary.

How do you implement a 2 level dictionary?

How do you use it?

Of course, you can put the actual translations in separate files but you get the idea.

This way you have created your own, super-simple i18n service 🌍