Localization

Requirements

• It should be reasonably easy to implement.
• Preferably it shouldn't introduce new dependencies.

React's Context API

Using Reacts' Context API (createContext, useContext) a language can be set to English/Swedish and stored globally in <App>. Child components and views can then access the current language and use a translation file in that view/component to get the correct text

Pros

• No external dependencies needed
• Full Control
• No extra functionality that we don't use gets implemented, making it lightweight.
• Each view can have its own translation file

Cons

• Setup needed, Context API is well documented but there are fewer examples of using it specifically for translation compared to other common libraries. The implementation pattern is similar to light & dark mode.
• You must implement advanced features yourself:
  • pluralization
  • interpolation ("Hello {name}")
  • formatting (dates, numbers)

Overall

If we just use it for choosing between translation outputs and do not intend to implement many languages, it is a good choice. If a lot of formatting (numbers, dates) and interpolation (adding variables to strings) occurs, then more work is required.

i18next/react-i18next

react-i18next is a library that builds on i18next and uses React's Context API internally, similar to Option:1, with the difference that the functionality is pre-made for ease of use. In the Github repo we can see that it has the MIT license, a large pool of contributors, and an average of 11 million downloads per week, making it a well-tested and widely used library.

Pros

• Used extensively, meaning many examples and documentation exist
• Advanced feature implementation exists:
  • pluralization
  • interpolation ("Hello {{name}}")
  • formatting (dates, numbers)
  • lazy loading
• Each view can have its own translation file
• Scales better with many languages

Cons

• Might be too big for our needs (in terms of extra functionality)
• External dependencies needed
• Setup needed. Documented on the official site and many unofficial sites with exampels

Overall

It is well tested and widely used, and if many languages and advanced functionality are required, it is a good choice. However, depending on usage, it might become too large for what is required.

Conclusion

We have decided to use React's built-in Context API as we already use React and this will not introduce new dependencies. The word count on our page is not large, making the creation of the translated files easier and the amount of supported languages for our project is low (currently only Swedish and English). We do not need something big.