react-i18next-tutorial: https://bigcheeseapp.com/2020/06/28/translate-your-react-app-with-react-i18next/
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; |
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; | |
} | |
} | |
}); |
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; |
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" | |
} |
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; |
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 | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment