Using with formatJS

Using locize with formatJS / messageformat

You can use locize in combination with formatJS. FormatJS is a internationalization framework provided by yahoo using the ICU messageformat.

To integrate locize into your messageformat codebase you will need to load the translations from our CDN via our API and needs a little more coding as using the locizify or i18next scripts.

Eg. Browser using the our API client locizer:

The script enables easy translation loading and provides on top functions to detect users language and to load the available languages on your project.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// <script src="https://unpkg.com/locizer/locizer.min.js"></script>
locizer
.init({
fallbackLng: 'en',
referenceLng: 'en',
projectId: '[your project id]'
})
.load('translation', function(err, translations, lng) {
function t(key, opts) {
opts = opts || {};
var m = new IntlMessageFormat(tranlations[key], lng);
return m.format(opts);
}
// translate
console.log(t('some key'));
});

Complete locizer documentation

Eg. Browser using the window.fetch:

1
2
3
4
5
6
7
8
9
10
11
12
13
window.fetch('https://api.locize.io/[YOUR_PROJECT_ID]/latest/[LNG]/[NAMESPACE]', {
mode: 'cors'
}).then(response => response.json())
.then(translations => {
function t(key, opts) {
opts = opts || {};
var m = new IntlMessageFormat(tranlations[key], lng);
return m.format(opts);
}
// translate
console.log(t('some key'));
})
.catch(e => console.warn(e));

(You can find your projectId and API Key in your projects settings under the API Tab.)

For more details you might read our post "the freedom of choice".


Have questions? Contact us!

Share