How to use tap:i18n with react using meteor


#1

Hi,

I am new to react with meteor and wishes to use tap:i18n for multiple language support in my project, I have tried to follow https://atmospherejs.com/tap/i18n#readable-syntax and also import i18n, but still getting error ‘Cannot read property setLanguage of undefined’, and I have also tried to use i18n.setDefaultLanguage(‘nl’), but still getting the same error, and I have also used i18n.map(‘en’, {PROJECT_LIST: ‘Project List’,}), but here getting error ‘Cannot read property map of undefined’, but if i donot import i18n, I am getting i18n is not defined, means after importing i18n i have i18n module available, but why I am getting this error , Can someone , please help me on this, also requested you to please share some link of example of using this package with react

Thanks in advance


#2

For a Meteor + React app, I’d recommend using something like universe:i18n instead. tap:i18n has a dependency on Blaze whereas universe:i18n does not.

Actually, I’m just in the middle of updating the react branch of the todos app to use universe:i18n (for more info see todos issue 104). I should have it done and committed shortly.


#3

As I rely on MobX, not Tracker, in my projects, I do it like that:

/client/lib/uiState.js
----------------------
import { action, observable } from "mobx"
import { TAPi18n, TAPi18next } from "meteor/tap:i18n"


class UiState {
    @observable lang = ""

    constructor() {
        this.setLanguage( "en" )
    }

   setLanguage(lang) {
        if( !lang ) return
        TAPi18n.setLanguage(lang)
        const self = this
        const _set = action("LANG_SET", () => {
            self.lang = lang
            TAPi18n.setLanguage(lang)
        })

        /* We wait until the language files are loaded */
        const _checkAndSet = () => {
            if(TAPi18next.options.resStore[ lang ]) _set()
            else Meteor.setTimeout(_checkAndSet, 500)
        }
        _checkAndSet()
    }
}
const uiState = new UiState()
export default uiState
/client/components/T.js
-----------------------
import { Component, PropTypes } from "react"
import { TAPi18n } from "meteor/tap:i18n"
import { observer } from "mobx-react"

import uiState from "../lib/uiState"

@observer export default class T extends Component {
    static propTypes = { k: PropTypes.string.isRequired }
    render = () <span>{TAPi18n.__(strCode, {}, uiState.lang)( this.props.k )}</span>
}
/i18n/ui.en.i18n.json
---------------------
{
    "menu": {
        "about": "About",
        "contacts": "Contacts"
    },
    "countries": {
        "ru": "Russia",
        "it": "Italy"
    }
}
/project-tap.i18n
-----------------
{
    "translation_function_name": "__",
    "supported_languages": [ "ru", "en" ],
    "i18n_files_route": "/i18n",
    "preloaded_langs": [ "en" ]
}
/client/view/SomeView.js
------------------------
import T from '../components/T'

const TranslatedComponent = () => <div><T k='menu.about' /></div>
/client/components/LanguageMenu.js
----------------------------------
import { TAPi18n } from 'meteor/tap:i18n'

import uiState from '../lib/uiState'

const LanguageMenu = ({ menu, url }) =>
    <div>
        {Object.keys(TAPi18n.languages_names).map(key =>
            <div key={key} onClick={() => uiState.setLanguage(key)}>{languages[key][1].replace(/^(.)/, (_, c) => c.toUpperCase()).replace(/(.+)\s.*/, "$1")}</div>
        )}
    </div>

export default LanguageMenu

#4

Thanks a lot, I will tried to check both the solutions and inform as soon as possible


#5

I’m using react-redux-i18n, for me it is optimal for React+redux…


#6

Awesome, my requirement is just achieve by simply using universe:i18n, Thanks a lot


#7

Thanks hwillson,

Great package working for my requirement, Thanks