How to Internationalize a React App

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

Our great sponsors
  • Klotho - AWS Cloud-aware infrastructure-from-code toolbox [NEW]
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • Sonar - Write Clean JavaScript Code. Always.
  • InfluxDB - Build time-series-based applications quickly and at scale.
  • react-i18n-tutorial

    Tutorial for Internationalization In React

    You can find the full code for this tutorial in this GitHub repository.

  • i18next-http-backend

    i18next-http-backend is a backend layer for i18next using in Node.js, in the browser and for Deno.

    In addition, we need to install i18next-http-backend which allows us to fetch translations from a directory, and i18next-browser-languagedetector which allows us to detect the user's language:

  • Klotho

    AWS Cloud-aware infrastructure-from-code toolbox [NEW]. Build cloud backends with Infrastructure-from-Code (IfC), a revolutionary technique for generating and updating cloud infrastructure. Try IfC with AWS and Klotho now (Now open-source)

  • i18next-browser-languageDetector

    language detector used in browser environment for i18next

    In addition, we need to install i18next-http-backend which allows us to fetch translations from a directory, and i18next-browser-languagedetector which allows us to detect the user's language:

  • i18next

    i18next: learn once - translate everywhere

    The easiest way to internationalize a React app is to use the library i18next. i18next is an internationalization framework written in Javascript that can be used with many languages and frameworks, but most importantly with React.

  • react-helmet

    A document head manager for React

    The first thing we need to do is adding the dir and lang attributes to the tag of the document. To do that, we need to install React Helmet:

  • react-i18next

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

    The easiest way to internationalize a React app is to use the library i18next. i18next is an internationalization framework written in Javascript that can be used with many languages and frameworks, but most importantly with React.

  • react-bootstrap

    Bootstrap components built with React

    Last, we'll install React Bootstrap for simple styling:

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • create-react-app

    Set up a modern web app by running one command.

    First, we'll set up the React website with Create React App (CRA).

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