React language translation module for developing a multilingual project.
$ npm install react-translator-component Live Demo CodeSandbox
Quite simple to use;
- Make your translator configuration.
- Include text contents in the
T(text)function. - Finally, call your application in
<Translator> /* APP */ </Translator>.
// App.js import React from 'react'; import { Translator, T, TF, LanguageList, Config } from 'react-translator-component' Config.default = 'tr'; Config.list = { en: { text: 'English', icon: require('./locale/flags/en.svg'), file: require('./locale/en.js') }, tr: { text: 'Türkçe', icon: require('./locale/flags/tr.svg'), file: require('./locale/tr.js') } } function App() { return ( <div> <h1> {T("There are no facts, only interpretations.")} </h1> <h6> {TF("{0} {1}", "Friedrich", "Nietzsche")} </h6> <LanguageList /> </div> ) } function TranslatorApp() { return ( <Translator> <App /> </Translator> ) } export default TranslatorApp;/* Default Language */ Config.default = 'tr'; /* Language List */ Config.list = { de: { // display text text: 'Deutsch', // display icon icon: require('./locale/flags/de.svg'), // translate file file: require('./locale/de') }, en: { text: 'English', icon: require('./locale/flags/en.svg'), file: require('./locale/en') }, tr: { text: 'Türkçe', icon: require('./locale/flags/tr.svg'), file: require('./locale/tr') } }{key} The text you have written into the T(text) function. {translated_text} Related translation text.
module.exports = { '{text}': '{translated_text}' }// ./locale/en.js module.exports = { 'There are no facts, only interpretations.': 'There are no facts, only interpretations.' }// ./locale/tr.js module.exports = { 'There are no facts, only interpretations.': 'Doğrular ve yanlışlar yoktur, sadece yorumlar vardır.' }You can develop a multilingual application by typing the text as it is without using any key. Type the text content into the T(text) or TF(text, ...arg) function and update the translation files.
// simple usage T("The text you want to translate."); // usage with arguments like a string.format TF("The {0} you want to translate with {1}.", "text", "arguments");Texts that have not been added to the Translate file will be collected at the rtc-missing-keys in LocalStorage.
Use the <LanguageList /> component to change the language within your application.
Use with the default theme.
<LanguageList />
Use with the dropdown theme.
<LanguageList Theme="Dropdown" />
- Define
<LanguageList Language={this.state.language} />in this way to create your own language list. - When
{this.state.language}in changes, your application will be render in that language.
Barış Ateş
Enes Zeren