Skip to content

Instantly share code, notes, and snippets.

@tekminewe

tekminewe/2-App.js

Last active Jun 29, 2020
Embed
What would you like to do?
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import './i18n.config';
const App = () => {
/**
* Use useTranslation hooks
*/
const { t } = useTranslation();
const [selectedLanguage, setSelectedLanguage] = useState('en');
const handleLanguageSelect = (event) => {
setSelectedLanguage(event.target.value);
}
return (
<div>
<label>
English
<input
type="radio"
value="en"
checked={selectedLanguage === 'en'}
onClick={handleLanguageSelect}
/>
</label>
<label>
中文
<input
type="radio"
value="zh"
checked={selectedLanguage === 'zh'}
onClick={handleLanguageSelect}
/>
</label>
<p>Your selected language is: {selectedLanguage} </p>
<p>Your have switch language for 0 times</p>
{/**
* Use the key in the language file to get the translated text
*/}
<p>{t('welcome')}</p>
</div>
);
}
export default App;
{
"selectedLanguage": "Your selected language is: {{language}}",
"welcome": "Welcome to the world of wonder"
}
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import en from './en.json';
import zh from './zh.json';
i18n
.use(initReactI18next)
.init({
resources: {
en: {
translation: en,
},
zh: {
translation: zh
},
},
fallbackLng: "en",
interpolation: {
escapeValue: false,
/**
* Add interpolation format method to customize the formatting
*/
format: (value, format, lng) => {
if (format === 'uppercase') {
return value.toUpperCase();
}
return value;
}
}
});
{
"selectedLanguage": "您选择的语言是: {{language}}",
"welcome": "欢迎来到奇幻的世界"
}
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
/**
* Import i18next
*/
import i18next from 'i18next';
import './i18n.config';
const App = () => {
const { t } = useTranslation();
const [selectedLanguage, setSelectedLanguage] = useState('en');
const handleLanguageSelect = (event) => {
setSelectedLanguage(event.target.value);
/**
* Set the language to either en or zh
*/
i18next.changeLanguage(event.target.value);
}
return (
<div>
<label>
English
<input
type="radio"
value="en"
checked={selectedLanguage === 'en'}
onClick={handleLanguageSelect}
/>
</label>
<label>
中文
<input
type="radio"
value="zh"
checked={selectedLanguage === 'zh'}
onClick={handleLanguageSelect}
/>
</label>
<p>Your selected language is: {selectedLanguage} </p>
<p>Your have switch language for 0 times</p>
<p>{t('welcome')}</p>
</div>
);
}
export default App;
{
"selectedLanguage": "Your selected language is: {{language}}",
"numOfTimesSwitchingLanguage": "Your have switch language for {{count}} time",
"numOfTimesSwitchingLanguage_plural": "Your have switch language for {{count}} times",
"welcome": "Welcome to the world of wonder"
}
{
"selectedLanguage": "您选择的语言是: {{language}}",
"numOfTimesSwitchingLanguage": "您已更换了语言{{count}}次",
"numOfTimesSwitchingLanguage_plural": "您已更换了语言{{count}}次",
"welcome": "欢迎来到奇幻的世界"
}
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import i18next from 'i18next';
import './i18n.config';
const App = () => {
const { t } = useTranslation();
const [selectedLanguage, setSelectedLanguage] = useState('en');
const handleLanguageSelect = (event) => {
setSelectedLanguage(event.target.value);
i18next.changeLanguage(event.target.value);
}
return (
<div>
<label>
English
<input
type="radio"
value="en"
checked={selectedLanguage === 'en'}
onClick={handleLanguageSelect}
/>
</label>
<label>
中文
<input
type="radio"
value="zh"
checked={selectedLanguage === 'zh'}
onClick={handleLanguageSelect}
/>
</label>
{/**
* Change the translated text and pass the data as second argument
*/}
<p>{t('selectedLanguage', { language: selectedLanguage })}</p>
<p>Your have switch language for 0 times</p>
<p>{t('welcome')}</p>
</div>
);
}
export default App;
{
"selectedLanguage": "Your selected language is: {{language, uppercase}}",
"numOfTimesSwitchingLanguage": "Your have switch language for {{count}} time",
"numOfTimesSwitchingLanguage_plural": "Your have switch language for {{count}} times",
"welcome": "Welcome to the world of wonder"
}
{
"selectedLanguage": "您选择的语言是: {{language, uppercase}}",
"numOfTimesSwitchingLanguage": "您已更换了语言{{count}}次",
"numOfTimesSwitchingLanguage_plural": "您已更换了语言{{count}}次",
"welcome": "欢迎来到奇幻的世界"
}
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import i18next from 'i18next';
import './i18n.config';
const App = () => {
const { t } = useTranslation();
/**
* Create a count state
*/
const [count, setCount] = useState(0);
const [selectedLanguage, setSelectedLanguage] = useState('en');
const handleLanguageSelect = (event) => {
setSelectedLanguage(event.target.value);
i18next.changeLanguage(event.target.value);
/**
* Increment count whenever we change language
*/
setCount(count + 1);
}
return (
<div>
<label>
English
<input
type="radio"
value="en"
checked={selectedLanguage === 'en'}
onClick={handleLanguageSelect}
/>
</label>
<label>
中文
<input
type="radio"
value="zh"
checked={selectedLanguage === 'zh'}
onClick={handleLanguageSelect}
/>
</label>
<p>{t('selectedLanguage', { language: selectedLanguage })}</p>
{/**
* Pass in count as data
*/}
<p>{t('numOfTimesSwitchingLanguage', { count })}</p>
<p>{t('welcome')}</p>
</div>
);
}
export default App;
import React, { useState } from 'react';
/** Import the config that just created */
import './i18n.config';
const App = () => {
const [selectedLanguage, setSelectedLanguage] = useState('en');
const handleLanguageSelect = (event) => {
setSelectedLanguage(event.target.value);
}
return (
<div>
<label>
English
<input
type="radio"
value="en"
checked={selectedLanguage === 'en'}
onClick={handleLanguageSelect}
/>
</label>
<label>
中文
<input
type="radio"
value="zh"
checked={selectedLanguage === 'zh'}
onClick={handleLanguageSelect}
/>
</label>
<p>Your selected language is: {selectedLanguage} </p>
<p>Your have switch language for 0 times</p>
<p>Welcome to the world of wonder</p>
</div>
);
}
export default App;
{
"welcome": "Welcome to the world of wonder"
}
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import en from './en.json';
import zh from './zh.json';
i18n
.use(initReactI18next) // passes i18n down to react-i18next
.init({
resources: {
en: {
translation: en, // Add translation for English
},
zh: {
translation: zh, // Add translation for Chinese
},
},
fallbackLng: "en",
interpolation: {
escapeValue: false // No need to escape for react
}
});
{
"welcome": "欢迎来到奇幻的世界"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.