Electron react boilerplate is one of the most popular boilerplate for electron js to setup this locally electron-react-boilerplate .
this solution we can use it in electron js react application and stand alone react application as well.
Step 1
install packages
npm install react-i18next
npm install i18next
npm install i18next
Step 2
create i18n.js file
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
// the translations
// (tip move them in a JSON file and import them,
// or even better, manage them separated from your code:
https://react.i18next.com/guides/multiple-translation-files)
const resources = {
en: {
translation: {
'Welcome to React': 'Welcome to React and react-i18next',
password_reset: '',
},
},
fr: {
translation: {
'Welcome to React': 'Bienvenue à React et react-i18next',
password_reset: 'Réinitialisation du mot de passe Windows',
},
},
};
i18n
.use(initReactI18next) // passes i18n down to react-i18next
.init({
resources,
lng: 'en',
interpolation: {
escapeValue: false, // react already safes from xss
},
});
export default i18n;
Step 3
add this line in app.tsx
import './i18n';
Step 4
to use it in functional component create funtional component file functionalComponent.tsx
import { useTranslation } from 'react-i18next';
function MyComponent() {
const { t, i18n } = useTranslation();
return (
<div>
<h1>{t('Welcome to React')}</h1>
<button
onClick={(e) => {
i18n.changeLanguage('fr');
}}
>
fr
</button>
<button
onClick={(e) => {
i18n.changeLanguage('en');
}}
>
en
</button>
</div>
);
}
export default MyComponent;
Step 5
to use it in class component create class component file classComponent.tsx
import React, { Component } from 'react';
import { useTranslation, withTranslation } from 'react-i18next';
import i18next, { t } from 'i18next';
// import i18n from './i18n';
// const { t, i18n } = useTranslation();
interface props {
t: any;
}
interface state {}
class TranslateClass extends Component<props, state> {
render() {
return (
<div>
<hr />
TranslateClass
<h1>{this.props.t('Welcome to React')}</h1>
<button
onClick={(e) => {
i18next.changeLanguage('fr');
}}
>
fr
</button>
<button
onClick={(e) => {
i18next.changeLanguage('en');
}}
>
en
</button>
</div>
);
}
}
export default withTranslation()(TranslateClass);
Step 6
import React from 'react';
import './i18n';
import MyComponent from './TranslateFunctional';
import MyComponent2 from './TranslateClass';
function Footer() {
return (
<footer>
{/* <section><Messages /></section> */}
<MyComponent />
<MyComponent2 />
</footer>
);
}
export default Footer;
0 Comments