README
Idea
I have something that other library in the Internet does not support:
Component based translation
: you can put your translation in component folder and useregisterTranslations
function to register with prefix (to make it unique). It's easier to organize and prevent conflict in the GIANT translation file when working with multiple people- Make use of React 16 Fragment component. We only want to translate the Text, not the whole component. Other library were made with old React versions, the component needs to be bound with html element like
div
,span
. With React fragment, we only return the Text while having all Component's lifecyle (to work with Redux) - Full Redux support
- Simple Api
Installation
npm install the-translation
Getting Started
import { createStore, combineReducers } from 'redux'
import { reducer as translationReducer } from 'the-translation'
const rootReducer = combineReducers({
// ...your other reducers here
// you have to pass translationReducer under 'currentLanguage' key,
currentLanguage: translationReducer
})
const store = createStore(rootReducer)
Register translations
// translations.js
export default {
en: {
codelink: 'CodeLink',
price: '%s/h'
},
vn: {
codelink: 'Cot Linh'
price: ''
}
}
// Component file
import { registerTranslations, Text } from 'the-translation'
import translations from './translations'
registerTranslations(translations, 'Home')
// Prefix must be unique or the library will raise the exception for you
<Text>Home.codelink</Text>
Simple usecase
<Text>Home.codelink</Text>
// EN Result: CodeLink
// VN Result: Cotlinh
Format usecase
const translations = {
en: {
price: '%s/h'
},
vn: {
price: '1h: %s'
}
}
<Text params={['100