1.i18next ---a localization framework.
2.react-i18next --React implementation of i18next library
Install i18next and react-i18next packages as a dependency from terminal.
npm install --save i18next react-i18next
i18next is an internationalization-framework for React/React Native. It provides features such as plurals, context, interpolation format. It provides you with a complete solution to localize your product from web to mobile and desktop.React-i18next is a powerful internalization framework for React / React Native which is based on React-i18next
4. Implement the Radio Button Group Control (For Changing the Language Functionality) into renderRadioButton() to the component at App.js file, so the user can easily switch Language through those radio buttons
// radio buttons
renderRadioButtons = () => {
return (
< input checked={this.state.value === 'en'}
name="language " onChange={(en) => this.onLanguageHandle(e)}
value="en" type="radio" />English
< input checked={this.state.value === 'de'} name="language "
onChange={(en) => this.onLanguageHandle(e)}
value="en" type="radio" />German
)
}
Language as a parameter and it gets all the translations from the i18n.js file for the keys provided.
//for changing the language
onLanguageHandle = (event) => {
let newLang = event.target.value;
this.setState({ value: newLang })
this.props.i18n.changeLanguage(newLang)
}
Implement the localization function in render() function of App component.
Add the renderRadioButtons() in JSX syntax. So the Radio button groups will render. Then add the content inside the t function in react.js which serves as a key for other languages for Localization.
{t(‘author.value’)}
//render in App.js
render() {
const { t } = this.props
return (
{this.renderRadioButtons}
{t(''paragraph")}
{t('author.title')} ":"{t('author.value')}}
{t('description.title')} ":" {t('description.value')}
)
}