Localization with React JS

1. Node JS (10 or Higher)
2. create-react-app (npm package)
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)
> npx create-react-app react-localization-example
> npm install --save i18next react-i18next
> npm install --save i18next-browser-languagedetector
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/...)
> npm install --save i18next-xhr-backend
react-localization-example
└── src
│ ├── locate
│ │ ├── en
│ │ │ ├── translate.json
│ │ ├── jp
│ │ │ ├── translate.json
i18n Configuration file
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}` 
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();

Four-Way to Implement the Localization with i18next-react

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);
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>
)
}
}
import React from 'react';
import { useTranslation } from 'react-i18next';
function App () {
const { t, i18n } = useTranslation();
return <h1>{t('Welcome to React')}</h1>

}
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

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);
onLanguageHandle = (event) => {
let newLang = event.target.value;
this.setState({value: newLang})
this.props.i18n.changeLanguage(newLang)
}
renderRadioButtons = () => {    return (<div>
<input
checked={this.state.value === 'en'}
name="language"
onChange={(e) => this.onLanguageHandle(e)}
value="en"
type="radio" />English &nbsp;
<input
name="language"
value="jp"
checked={this.state.value === 'jp'}
type="radio"
onChange={(e) => this.onLanguageHandle(e)}
/>Japanese
</div>)
}
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>
);
}
> npm install --global serve
> npm run build
> serve -s build

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store