node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

i18n-for-browser

i18n-for-browser

NPM version Dependency status Build status Coverage status

Implementation of i18n-node designed for client-side.

Install

npm install i18n-for-browser
# or 
yarn add i18n-for-browser

Load

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}`);

CDN

Also i18n-for-browser is available on unpkg.com as UMD, which exposes global object i18n.

<script src="https://unpkg.com/i18n-for-browser?main=umd"></script>

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>

NPM