Commit 2b0bf93e authored by Maksym Tishchenko's avatar Maksym Tishchenko
Browse files

i18next support added.

Translated Navigation as an example.
parent cfcc945c
......@@ -34,8 +34,10 @@
"dependencies": {
"es-cookie": "^1.3.2",
"history": "^4.10.1",
"i18next": "^19.8.3",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-i18next": "^11.7.3",
"react-router-dom": "^5.1.2"
},
"devDependencies": {
......
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import "./i18n";
import { log } from '@genesys/client/utilities/debug';
// import * as cookies from 'es-cookie';
......
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import translations from 'translations.json';
// the translations
i18n
.use(initReactI18next) // passes i18n down to react-i18next
.init({
resources: translations,
lng: 'en',
interpolation: {
escapeValue: false,
},
});
export default i18n;
{
"en": {
"translation": {
"nav": {
"home": "Home",
"apiInfo": "API info"
}
}
}
}
import React from 'react';
import { Link } from 'react-router-dom';
import {WithTranslation, withTranslation} from "react-i18next";
// interface INavigation extends React.ClassAttributes<any> {}
export default class Navigation extends React.Component<any, any> {
class Navigation extends React.Component<WithTranslation, any> {
public render() {
const { t } = this.props;
return (
<header>
<nav>
<ul style={ { display: 'flex', listStyle: 'none' } }>
<li style={ { marginRight: '20px' } }><Link to="/">Home</Link></li>
<li style={ { marginRight: '20px' } }><Link to="/api-info">API info</Link></li>
<li style={ { marginRight: '20px' } }><Link to="/">{t("nav.home")}</Link></li>
<li style={ { marginRight: '20px' } }><Link to="/api-info">{t("nav.apiInfo")}</Link></li>
</ul>
</nav>
</header>
);
};
}
export default withTranslation()(Navigation);
This diff is collapsed.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment