Popular Solutions
A library called i18next makes it possible to localise your app. In essence, you are calling this library's methods and giving it keys to translate. The methods return data from localization files in the chosen language. There is a lot more to i18next than what we will cover in this lesson, so bear with us. I18next is discussed in more detail here.
Prerequisites
- A basic understanding of React
- Node.js installed on your computer
Install i18next and react-i18next packages
The i18next and react-i18next packages need to be included in our project in order to localize a React application utilize the i18next.
The entire translation functionality is provided by i18next, while react-i18next adds some additional React features, such as hooks, HOCs, render properties and more.
You can use the following command to install
npm install react-i18next i18next
Configuration setup
Create the following translation configuration in a file i18n.js and place a file in the src folder:
We can connect the react-i18next module with help of initReactI18next object given by the module by importing the i18n instance from the i18next core. The i18next framework will pass the i18n instance to the react-i18next module as a result.
Any plugins are loaded and bound to the i18n instance when the use() function is used. After defining the fundamental configuration choices, we call the init() function to initialize our configuration.
Resources, lng, and fallbackLng object properties have also been added. We offer the translation object for two languages—English and Hindi—within the resources.
The ISO standard codes for the English and Hindi languages are en and hi, respectively. The configuration file is imported:
Next, import the configuration file in the src/index.js, like so:
import "./i18n" and save these files
Translate a simple text message
The header message "Welcome to Thirdrocktechkno Blog'' from our starter project will be translated first.
Include the English and Hindi translations in the src/i18n.js file:
We defined our message in a JSON format, as can be seen in the translation object, and gave it a distinct key for each possible locale.
Access translated messages
A translation function named t is offered by i18next via the i18n instance (). It accepts a key to look up the translation object and returns the string for the current language that matches the key.
There are various ways to access t() depending on the type of React component, including:
In a functional component, a React Hook and the higher order component for withTranslation (HOC). Both the class and function components of the Translation render props.
How to use method useTranslation?
Using the useTranslation Hook, open the components/Content.js file and import the useTranslation Hook
From the Hook, we can access the t function and the i18n instance. We only need the t function to translate our content. Later in this guide, we will use the i18n instance to change the application language. For now, We can remove the i18n.
Next, replace the h1 text with the t function contains the translation key so we have the following:
Save the file and reload the front.
Nothing is altered. To save time, let's temporarily alter the lng attribute in the src/i18n.js file to Hindi (hi):
Now you will see the Hindi text rendered once we reload the page
Conclusion
The i18next framework in a React application is something you've learnt a lot about. Almost all of the use cases required to use i18next were addressed. Using it to localize a React application is now possible.