JSFiddle - React, Tailwind, and code Playground

by jamuhl

HTML

<script src="https://unpkg.com/i18next/i18next.js"></script>
<div style="height: 100px">
  <button onclick="i18next.changeLanguage('en')">
  english
  </button>
  <button onclick="i18next.changeLanguage('de')">
  german
  </button>
  <div id="output" />
</div>

JavaScript

// import i18next from 'i18next';

i18next.init({
  lng: 'en',
  debug: true,
  resources: {
    en: {
      translation: {
        "key": "hello world"
      }
    },
    de: {
      translation: {
        "key": "hello welt"
      }
    }
  }
}, function(err, t) {
  // init set content
  updateContent();
});

function updateContent() {
  document.getElementById('output').innerHTML = i18next.t('key');
}

function changeLng(lng) {
  i18next.changeLanguage(lng);
}

i18next.on('languageChanged', () => {
  updateContent();
});