The internationalization for web apps was a nightmare until now. Say hello to the Ultimate I18n JS!
🚀 Three Steps
First step. Add the Ultimate I18n JS to your <head> section as the first script on your page.
<script src="https://cdn.jsdelivr.net/npm/ultimate-i18n-js@0.0.1/lib/index.min.js"></script>
Second step. Set your default language code in the <html> tag.
<html lang="en">
Third step. Add translations by setting the i18n-[LANG_CODE]="" attribute to any element on your page.
<h1
i18n-pl="Witaj świecie"
i18n-es="Hola Mundo">
Hello World <!-- Your default language (en) -->
</h1>
That's it! 🤯 Your page is multilingual now!
The library will automatically detect a user's language and display a right translation.
To manually change the language call the set method on the UltimateI18n object.
<button onclick="UltimateI18n.set('en');">EN</button>
<button onclick="UltimateI18n.set('es');">ES</button>
<button onclick="UltimateI18n.set('pl');">PL</button>
The library remembers that choice. After the page is reloaded a user still sees a chosen language.
⚒ Module Bundlers
You may use the Ultimate I18n JS with Webpack or a similar bundler. To install the package execute the below command.
npm install ultimate-i18n-js
Now you need to call the setup method before render your app.
import * as UltimateI18n from 'ultimate-i18n-js';
UltimateI18n.setup();
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('placeholder').innerHTML = `
<span
i18n-pl="Kocham czerwony"
i18n-es="Amo el rojo">
I love red
</span>
`;
});
That's it! 🤯
🤩 Demos
Check these online demos:
Top comments (0)