Localize your React Application!
Ever wondered how interesting it would be if you could make your website available in different languages or preferences as per the need of users???
Well, react-i18next is one of the simplest tools for this! It makes the task of making a react website multilingual extremely easy!
react-i18next is the react implementation of I18next.
Well for all those who don’t know what I18next is, let's have a quick look at what it actually is!
I18next is an internationalization framework based on JavaScript. It can be used with React, Angular, Vue, and also with Node, PHP, Android as well!
All we need to do is, detect the user’s language, load the translations, and push those translations to the framework we are using! Yes, believe me, it is that easy!
Now coming to react-i18next,
To say in simple terms, react-i18next is nothing but react implementation of I18next. It provides us with several hooks, plugins, and many more functionalities that can be used for localizing our react Application. If you are a React developer and want to localize your React Application then react-i18next is just a piece of cake for you!
Enough of introduction! Now let's dive deeper into the usage for this package and understand it in more detail with an extremely basic example.
We will be creating a very very basic application. ( I haven’t focused much on the UI part.) It is just a sample project that might help you to get started with this package and might help you to implement it in your next react applications.
Basically, we will be displaying ‘Welcome’ in 3 different languages using this package.
Click here to view what we are building!
Before proceeding ahead I am assuming that you have at least a basic understanding of React hooks and JavaScript.
Step 1
Create a react application.
npx create-react-app <app name>Step 2
Install all the dependencies required for using react-i18next and I18next
npm install react-i18next i18next --savenpm install i18next-browser-languagedetector
After installing all the dependencies you might see those in the package.json file.
Step 3
Now comes the most important part of the project. ie. Creating i18n.js file!
Create an i18n.js file in the root directory of your project folder. This file will contain all the required configurations and required translations for localizing your react application.
Before we understand what all things are used inside this file, let's include this file in the index.js file.
Step 4
Import this i18n file inside the index.js file.
We will talk about the Suspense parameter later on in the blog.
Now let’s understand what all stuff needs to be added in the i18n.js file for the overall setup.
use()
The use function is used to load additional plugins for i18next . Such as any sort of backend /language detector(it is used for detecting the language)etc.
init() method
First of all, to use i18next in our app, we need to initialize it using the init method.
i18n.init(options, callback)
init is used to initialize reacti18next instance. It tells us how our i18n instance will look like! After all the translations are loaded the callback will be called. We have to wait for init to complete (promise resolution )before using the t function. (We will understand what’s a t function later on in the blog). The init method accepts different properties as its arguments such as,
fallbackLng : Language to be used if some translations are not defined in the file.
debug: logs to console states of i18next. Helps in debugging.
resources: It nothing but a JSON object wherein we define/specify all translations
For Scalability, we can separate the translations into multiple files and load them on demand. For this create a locales folder. Inside that create separate files for each translation like this,
Namespaces are features in i18next which allow the user to separate translations and get loaded in multiple files.
Step 5
Now it's time to finally work on the App.js file! Basically, we will make use of useTranslation hook. This hook gets the t(translation) function and i18n instance inside your functional component.
The useTranslation hook will trigger a suspense if not ready (eg. pending load of translation file). Well for that only we used the Suspense parameter earlier in the index.js file. Alternatively, you can set useSuspence to false.
The changeLanguage() method accepts a new language as a parameter and it gets all the translations from the i18n.js file for all the keys provided.
And yay! we have localized the React Application!
You can find the source code for this small application at
https://github.com/shrushti2000/react-i18next-demo
That’s it for this blog!
Hope it helps! 😃
Let’s connect on Github and LinkedIn
Happy learning!😊
