Интернационализация веб-приложений до сих пор была кошмаром. Поздоровайтесь с Ultimate I18n JS!

🚀 Три шага

Первый шаг. Добавьте Ultimate I18n JS в раздел <head> в качестве первого скрипта на странице.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.min.js"></script>

Второй шаг. Установите код языка по умолчанию в теге <html>.

<html lang="en">

Третий шаг. Добавьте переводы, установив атрибут i18n-[LANG_CODE]="" для любого элемента на вашей странице.

<h1
  i18n-pl="Witaj świecie"
  i18n-es="Hola Mundo">
  Hello World <!-- Your default language (en) -->
</h1>

Вот и все! 🤯 Теперь ваша страница многоязычна!

Библиотека автоматически определит язык пользователя и отобразит правильный перевод.

Чтобы вручную изменить язык, вызовите метод set для объекта UltimateI18n.

<button onclick="UltimateI18n.set('en');">EN</button>
<button onclick="UltimateI18n.set('es');">ES</button>
<button onclick="UltimateI18n.set('pl');">PL</button>

Библиотека помнит этот выбор. После перезагрузки страницы пользователь по-прежнему видит выбранный язык.

⚒ Сборщики модулей

Вы можете использовать Ultimate I18n JS с Webpack или аналогичным сборщиком. Чтобы установить пакет, выполните приведенную ниже команду.

npm install ultimate-i18n-js

Теперь вам нужно вызвать метод setup перед рендерингом вашего приложения.

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

Вот и все! 🤯

🤩 Демо

Проверьте эти онлайн-демонстрации: