node package manager

i18n-for-browser

NPM

i18n-for-browser

Implementation of i18n-node designed for client-side.

Install

npm install i18n-for-browser

or

yarn add i18n-for-browser

Test

npm test

or

yarn test

Load

// load modules
import * as i18n from 'i18n-for-browser';

now you are ready to use a i18n.__('Hello'). Also __ and __n available as tags for template literals, example:

console.log(__`Hello ${name}`);

Configure

Some options same as in i18n-node, except

i18n.configure({
    // store of translations
    locales: {
        'en': {...},
        'ru': {...}
    },
 
    // sets a custom cookie name to read/write locale  - defaults to NULL
    cookie: 'yourcookiename',
 
    // injects `__` and `__n` functions to global scope
    // some methods like `setLocale` are injected to this functions
    // e.g. `__.getLocale()`
    // defaults to false
    globalize: true
});

Properties necessary for work with fs (directory, updateFiles, indent, extenstion, prefix) are skipped.

Also you can use auto-configuration: just define variable I18N with configuration before importing the module.

const I18N = {
    locales: {
        'en': {...},
        'ru': {...}
    },
    globalize: true
};
 
...
 
import 'i18n-for-browser';
 
console.log(`${__('Hello')}!`);
 

API

__(phrase, ...params)

See i18n-node.

__n(singular, plural, count, ...params)

See i18n-node.

__mf(phrase, ...params)

See i18n-node.

__l(phrase)

See i18n-node.

__h(phrase)

See i18n-node.

setLocale(locale)

See i18n-node. Also this function write new locale to cookies if cookiename is setted.

onLocaleChange(listener)

Set function to call when locale was change.

For example if you provide only needed translation via I18N object.

const I18N = {
    cookiename: 'locale',
    globalize:  true
    ...
};
 
...
 
import 'i18n-for-browser';
 
__.onLocaleChange(location.reload.bind(location));
 
...
 
$(".language-picker__language__en").click((e) => {
    __.setLocale('en');
});
 

Also it very comfortable to use it with react:

class App extends React.Component {
 
    ...
 
    componentDidMount() {
        __.onLocaleChange(this.forceUpdate.bind(this));
    }
 
    ...
 
}

getLocale()

See i18n-node.

getLocales()

Get list of available locales.

getCatalog(locale)

See i18n-node.

addLocale(locale, catalog)

Dynamically adding/replacing of locale

removeLocale(locale)

Remove locale by key.

Express middleware helper

To provide translations to client from your express app you can use this helper.

import i18nExpressHelper from 'i18n-for-browser/lib/middleware';
// or 
// const i18nExpressHelper = require('i18n-for-browser/lib/middleware’);
...
// Before this `i18n` should already initialized.
app.use(i18nExpressHelper(i18nNodeConfig));
...
<!DOCTYPE html>
<html>
    <head>
        <title>views/layout.ejs</title>
        <%- initI18nForBrowser() %>
        <script src="js-file-with-imported-i18n-for-browser.js"></script> 
    </head>
    <body>
        <%- body %>
    </body>
</html>