Internationalizing and Localizing a React App: i18n Made Easy

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • WorkOS - The modern identity platform for B2B SaaS
  • translation-check

    This package shows an overview of your translations. Check which keys are not yet translated.

  • The engineering team should commit to adding new translation keys for one locale. In this case, let's assume en-US for the sake of this example. As the engineers are working, they will add copy to the locales/en-US.json file and carry on with their work. When they open a pull request for their work upstream to their development environment, a script can run in CI that will check for newly-created keys that aren't present in all the supported locales and notify the appropriate translators that your branch needs translation work. Alternatively, you could consider a tool like translation-check, which will create a simple dashboard where you can get an overview of missing translations by locale.

  • react-i18next

    Internationalization for react done right. Using the i18next i18n ecosystem.

  • While I believe there is a lot of valid criticism for using a library for everything in the JavaScript ecosystem, I strongly believe this is a case where you want to put your trust in the experts of the open-source community. The most common library I've seen for serving translations in a React app is react-i18next.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts