DEV Community

Cover image for The Simplest I18N JS Framework is here!
b4rtaz
b4rtaz

Posted on • Originally published at b4rtaz.Medium

The Simplest I18N JS Framework is here!

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>
Enter fullscreen mode Exit fullscreen mode

Second step. Set your default language code in the <html> tag.

<html lang="en">
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
  `;
});
Enter fullscreen mode Exit fullscreen mode

That's it! 🤯

🤩 Demos

Check these online demos:

Top comments (0)