Localization with React JS
Internationalization or Localization is important for a multinational company that has a website, which would be reachable to different languages understanding people. From a Developer perspective, some developers still think that internalization is a hard task to do. But in modern front end technology makes it easy to implement. React is the most popular front-end framework to build the website with it. i18next and react i18next makes the localization easier than ever. In this article, I will show you how to localization the website using React JS, i18next and react i18next packages.
Prerequisite
1. Node JS (10 or Higher)
2. create-react-app (npm package)Package Needed For Localization
1. i18next(ver: 19.1.0)
2. i18next-browser-languagedetector (ver: 4.0.1)
3. react-i18next (ver: 11.3.1)
4. i18next-xhr-backend (ver: 3.2.2)Using npx with create-react-app react npm boilerplate package to create the project from the terminal:
> npx create-react-app react-localization-exampleConfigure Packages Steps by Steps
Install i18next and react-i18next the npm package as dependency from terminal
> npm install --save i18next react-i18nexti18next is an internationalization-framework for JavaScript. i18next provides features such as (plurals, context, interpolation, format). It provides you with a complete solution to localize your product from web to mobile and desktop.
react-i18next is a powerful internationalization framework for React / React Native which is based on i18next.
Then Install Browser Language Detector of npm packages
> npm install --save i18next-browser-languagedetectorThis is a i18next language detection plugin uses to detect user agent (Web Browser) language by using a cookie, localStorage, navigator, queryString, HTML tag, path, and subdomain.
cookie (set cookie i18next=LANGUAGE)
localStoare (set key i18nextLng=LANGUAGE)
queryString(append ?lng=LANGUAGE to URL)
htmlTag(<html lang=”LANGUAGE” …)
path(http://example.site/LANGUAGE/...)Then install the Backend XHR for i18next react packages
> npm install --save i18next-xhr-backendAdding lazy loading for translations we need to use this npm package. It will load resources from a backend server using the XHR API.
Implementation steps Localization to Sample Project
Create the folder named locate in src directory, then create the language-wise folder in locate folder. I have created two folder name en -> for english language and jp -> for japanese language. Then add json files named translate in those folders. Those files would act as Resource of for react-i18next package.
react-localization-example
└── src
│ ├── locate
│ │ ├── en
│ │ │ ├── translate.json
│ │ ├── jp
│ │ │ ├── translate.json.../en/translate.json contains the english language mapping JSON object.
.../jp/translate.json the file contains the japanese language mapping JSON object.
Add the i18n.js file in src the folder in an application (react-localization-example/src/i18n.js.
Line 1…6 Import all dependency and separated language JSON file in i18n.js file.Line 9, using the XHR so language file could be loaded with using Lazy techniqueLine 10, Using the Language Detector, so When the site load in the browser it can detect the languageLine 11, Hand over the i18n configuration to react-i18next npm packageLine 13...16, add the `json` formated language `resource` to configuration. Resource are using for get the data and data file to translate process. In our application i load two json file as resource for traslation.Line 18,(lng) Select the default language as EnglishLine 20, (fallbackLng) is the i18next react not finding any language to load, it will load the englishLine 23 (ns), 24 (defaultNS), Add the Namespace and Default Namespace, Namespaces are a feature in which allows you to separate translations that get loaded into multiple files. we can select the namespace for starting point for translation, where to get the key and value for traslate. In our json file we use `traslate` as namespace to seperate and start point for traslate.Line 25, keySeparator is used for extract value by key for nested object.Line 26...29, Interpolation is one of the most used functionalities in I18N. It enables you to integrate dynamic values into your translations.react 30...35, Handle rendering while translations are not yet loaded, We can globally configure the wait option by add `react: {wait:true}`
Add the i18next provider in index.js the file so the whole application can get access to the Localization. The i18nextProvider takes an i18next instance via props i18n and passes that down using the context API.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { I18nextProvider } from 'react-i18next';
import i18n from './i18n'
import * as serviceWorker from './serviceWorker';ReactDOM.render(
<I18nextProvider i18n={i18n}>
<App />
</I18nextProvider>,
document.getElementById('root'));serviceWorker.unregister();
In-line 5, I import all thei18n configuration from i18n.js file. In ReactDOM.render() function, Wrap the App main Component with I18nextProvider .
Four-Way to Implement the Localization with i18next-react
Using HOC(Higher Order Component)
To extend the component with a react-i18next package, we can use withTranslation as HOC , passing the additional react-i18next function t as props to React Component
import React from 'react';
import { withTranslation } from 'react-i18next';export class App extends React.Component { render() {
const {t} = this.props
return (<h1>{t('Welcome to React')}</h1>)
}
}export default withTranslation()(App);
Using Render Props
The render prop enables the developer to use the t function inside react component, Translate is the render props for react-i18next to enable this feature.
import React from 'react';
import { Translation } from 'react-i18next';export default class App extends React.Component {
render() {
return (
<Translation>
{t => <h1>{t('Welcome to React')}</h1>}
</Translation>
)
}
}
Using Hooks
If developer want to use react-i18next to the functional component, he or she needs to use the react-i18next hook function named useTranslation. Then use t function to translate content.
import React from 'react';
import { useTranslation } from 'react-i18next';function App () {
const { t, i18n } = useTranslation();
return <h1>{t('Welcome to React')}</h1>
}
Using Trans Component
The Trans component is the best way to translate a JSX tree in one translation. This enables easily translation technique for text containing a link component or formatting like <strong>.
import React from 'react';
import { Trans } from 'react-i18next';export default App extends React.Component {
render() {
return (<Trans><H1>Welcome to React</H1></Trans>)
}
}
I am using Trans and HOC to Localize the example Samp.
Implement the Localization to App.js file
First, I have to change the App functional component to Class or Container Component, Implement the react-i18next HOC feature to makes the t function available in app component.
import React from 'react';
import './App.css';
import { withTranslation, Trans } from 'react-i18next'class App extends React.Component {
constructor(props) {
super(props)
this.state = {
value: "en"
}
} render () {
return (
<div className="App">This is Localization</div>
);
}}export default withTranslation()(App);
In-line 3, import withTranslation and Trans from react-i18next . Add the constructor and add the state name value to en so when we change the language through the radio control we can set the value state for so we can pass and preserve the Language related value navigate through different subcomponent of App component.
Implement the function named onLanguageHandle, which takes the radio group specific radio button value then change the language ofapp component content by i18n's changeLanguage(new language name which is resource i18n configuration file).
onLanguageHandle = (event) => {
let newLang = event.target.value;
this.setState({value: newLang})
this.props.i18n.changeLanguage(newLang)
}Implement the Radio Button Group Control (For Changing the Language Functionality) in to renderRadioButtonfunction in app the component at App.js file, so the user can easily switch Language through those radio buttons.
renderRadioButtons = () => { return (<div>
<input
checked={this.state.value === 'en'}
name="language"
onChange={(e) => this.onLanguageHandle(e)}
value="en"
type="radio" />English <input
name="language"
value="jp"
checked={this.state.value === 'jp'}
type="radio"
onChange={(e) => this.onLanguageHandle(e)}
/>Japanese
</div>)
}
To fire the onLanguageChange() //event , we have to add it to Radio button onChange function. If we want the make the Radio button checked we check the state value in a checked attribute in the radio button.
Implement the localization function in render() function of aApp component
render () {
const {t} = this.props return (
<div className="App">
{this.renderRadioButtons()}
<h1><Trans>Paragraph</Trans></h1>
<table>
<tbody>
<tr>
<td style={{width: '20%'}}>
{t('author.title')}
</td>
<td style={{width: '5%'}}>:</td>
<td style={{width: '75%'}}>
{t('author.value')}
</td>
</tr>
<tr>
<td style={{width: '20%'}}>
{t('description.title')}
</td>
<td style={{width: '5%'}}>:</td>
<td style={{width: '75%'}}>
{t('description.value')}
</td>
</tr>
</tbody>
</table>
</div>
);
}
Add the renderRadioButton() function in react jsx syntax so the Radio button groups will render() in view. Then add <Trans> and t function in react js jsx to implement the Localization and Internalization of the React JS Component.
Full Code is below there
Browser output at localhost:3000 port
If you want to see the build version or production version is okay for localization in the development environment. Install the package below
> npm install --global serveServe is a lightweight web server, so we can run our production build through this serve npm package. Then build the production-ready react app by following command
> npm run buildBy this command it creates the build the folder in the root of the project with necessary html , js , assets , css file with a minimized version. Then run the following command to run the production version react app locally
> serve -s buildGithub link
