react-translator-component
React language translation module for developing a multilingual project.
Getting started
Install with NPM:
$ npm install react-translator-component
Usage
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 = {
default: 'en',
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;Config
/* 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')
}
}Translate File
{key} The text you have written into the T(text) function.
{translated_text} Related translation text.
module.exports = {
'{text}': '{translated_text}'
}Sample
// ./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.'
}Translate Function
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.
Language List
Use the <LanguageList /> component to change the language within your application.
Default Theme
Use with the default theme.
<LanguageList />
Dropdown Theme
Use with the dropdown theme.
<LanguageList Theme="Dropdown" />
Custom Language List
- 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.
Author
Barış Ateş
Enes Zeren