Pocket is a blazing fast internationalization library that can fit in your pocket (< 1KB)
✅ Fast translated string lookups (allows nesting!)
✅ String template interpolation
✅ Compatible with ALL browsers (yes, even IE 11)
✅ Can load translation files from URL
✅ Absolutely no dependencies
npm i pocket-i18n
You can use ES6 imports or (CommonJS require
).
import Pocket from 'pocket-i18n';
Or, just use a script tag:
<script src="node_modules/pocket-i18n/pocket-i18n.js"></script>
Both Pocket.load
and Pocket.loadFromUrl
return an intl
object with a t
method for translation lookups.
const translations = {
homePage: {
footer: {
copyright: 'Copyright {companyName} 2019'
}
}
};
const intl = Pocket.load(translations);
intl.t('homePage.footer.copyright', {companyName: 'My Company'});
// Copyright My Company 2019
const intl = Pocket.loadFromUrl('translations/norwegian.json', function (intl) {
intl.t('homePage.footer.copyright', {companyName: 'My Company'});
// Opphavsrett My Company 2019
});
const intl = await new Promise(resolve => Pocket.loadFromUrl('translations/spanish.json', resolve));
intl.t('homePage.footer.copyright', {companyName: 'My Company'});
// Derechos de autor My Company 2019
The translation lookup. Let's say translations object looks like this:
{
homePage: {
footer: {
copyright: 'Copyright My Company 2019'
}
}
}
To look up the copyright translation, we would pass 'homePage.footer.copyright'
.
The set of interpolation values. Let's say translations object looks like this:
{
homePage: {
footer: {
copyright: 'Copyright {companyName} 2019'
}
}
}
We would pass the fillers object to t
like so:
intl.t('homePage.footer.copyright', {companyName: 'My company'});
const translations = {
homePage: {
footer: {
copyright: 'Copyright {companyName} 2019',
companyName: 'Translated Company Name'
}
}
};
const intl = Pocket.load(translations);
intl.t('homePage.footer.copyright', {companyName: intl.t('homePage.footer.companyName')});
// Copyright Translated Company Name 2019