Wondering what’s next for npm?Check out our public roadmap! »

    rxi18n

    0.1.12 • Public • Published

    Rxi18n : i18n for React Redux made simple

    install

    • npm
    $ npm i rxi18n --save
    • yarn
    $ yarn add rxi18n

    usage

    Setup your translation file

    Translation file is a flat json key map

    {
      "key1":"translation2",
      "key2":"translation2"
    }

    Setup the reducer

    import {myReducer} from "./myReducer"
    import {reducer as rxi18n} from "rxi18n"
     
     
    const appReducer = combineReducers({
      myReducer,
      rxi18n
    })

    With custom reducer name

    import {myReducer} from "./myReducer"
    import {reducer as myI18nReducer, setReducerName} from "rxi18n"
    setReducerName('myI18nReducer')
     
    const appReducer = combineReducers({
      myReducer,
      myI18nReducer
    })

    Load your translations

    With Saga :

    import {actions as rxi18nActions} from "rxi18n"
     
    //do loading process...
     
    //then add 'en' translations to the rxi18n state
    yield put(rxi18nActions.addTranslations('en', translations))
    //switch lang to 'en' 
    yield put(rxi18nActions.setLang('en'))

    API :

    actions :

    • addTranslations (lang, translations)
    • setLang (lang)

    selectors :

    • lang(state) //current lang iso
    • translations(state) // translations of current lang
    • isLangAvailable(state, lang)
    • t(state, { key, replacements, number })

    Decorate your view components with the localize HOC

    import {localize} from "rxi18n"
     
    @localize()
    export default class MyComponent extends PureComponent{
      
    }

    or

    import {localize} from "rxi18n"
     
    class MyComponent extends PureComponent{
      
    }
     
    export default localize()(MyComponent)

    Translate using the t function

     
    import {localize} from "rxi18n"
     
    @localize()
    export default class MyComponent extends PureComponent{
      
      render(){
        const {t} = this.props;
        return (
          <span>{t('key1')}</span>
        )
      }
    }

    Simple translate syntax :

    {
      greetings: "hello world"
    }
     
    t("greetings") //hello world

    Variable replacement syntax :

    {
      greetings: "Hello {name}!"
    }
    t("greetings", {name: "Big Boss"}) //Hello Big Boss!

    Pluralize syntax

    {
      text: "{0} There are no {items}!"+
      "|[1,3] You have one, two or three {items}."+
      "|{4} Four is a great number of {items}!" +
      "|[5,*]The number of {items} you have is uncountable!"
    }
     
    const replacements = {items:'books'}
    t("text", replacements, 3)
    //You have one, two or three books
     
    t(key, replacements, number)

    Install

    npm i rxi18n

    DownloadsWeekly Downloads

    0

    Version

    0.1.12

    License

    MIT

    Unpacked Size

    103 kB

    Total Files

    13

    Last publish

    Collaborators

    • avatar