Demo

Related

Usage

# npmnpm install react-translator2# yarnyarn add react-translator2

import{TranslatorContext,createTranslator,withTranslator}from'react-translator2'consttranslator=createTranslator({locale?:string,// set it on initialize or before first renderingtranslations?:{// If you want to define translations in component only, no need to set it on initialize[locale:string]:{[key:string]:string|array|object}},defaultLocale?:string,// when no value can be found in current locale, try to fallback to defaultLocalemerge?:Function// `lodash.merge` for example, if you want to use component translator you must pass it})constApp=withTranslator(translations?)(({ t})=><div>{t('msg')}</div>)constapp=(<TranslatorContext.Providervalue={{translator,toggleLocale}}><App/></TranslatorContext.Provider>)

constcontext=require.context('.',true,/([\w-]*[\w]+)\.i18n\.json$/)constLOCALE_KEYS:{[key:string]:string[]}={}consttranslations:{[locale:string]:{[key:string]:string}}=context.keys().reduce((modules:any,key:string)=>{constmodule=context(key)constlang=key.match(/([\w-]*[\w]+)\.i18n\.json$/)[1]constmatched=modules[lang]||(modules[lang]={})if(process.env.NODE_ENV==='development'){constkeys=LOCALE_KEYS[lang]||(LOCALE_KEYS[lang]||[])constmoduleKeys=Object.keys(module)constduplicates=_.intersection(keys,moduleKeys)if(duplicates.length){console.warn('detect duplicate keys:',duplicates)}keys.push(...moduleKeys)}Object.assign(matched,module)returnmodules},{})

import{withTranslator}from'react-translator2'exportdefaultwithTranslator({zh:{message:'我的信息',},en:{message:'My Message',},})(({ t})=>(<div>{t('message',obj_params?)}{t('nested.message',arr_params?)}</div>))

componentDidUpdate(prevProps:TranslatorProps){if(prevProps.locale!==this.props.locale){// locale changed}}

{changeLocale(){this.props.toggleLocale(locale)this.props.toggleDefaultLocale(defaultLocale)}}

SSR related

import{TranslatorContext,createTranslator}from'react-translator2'app.use(async(ctx,next)=>{consttranslator=createTranslator({locale:string,// ctx.cookies.get('locale_cookie')defaultLocale:string,})constapp=(<TranslatorContext.Providervalue={{translator,toggleLocale}}><App/></TranslatorContext.Provider>)})

template syntax

t('a.b.c')// will try to find `a.b.c` on your custom transition, if a is falsy, will render undefined and try default locale// render `nested value`withTranslator({en:{a:{b:{c:'nested value',},},},})// render `nested template`t('a.b',{c:d:'nested template'})withTranslator({en:{a:{b:'{ c.d }'},},})

// nested with array key and template// render `1`t('a.b[0]',[{a:1}])withTranslator({en:{a:{b:['{ 0.a }'],// do not use `[0].a` here, `0[a]` is also OK},},})

Feature Request or Troubleshooting