JSFiddle - React, Tailwind, and code Playground

by AlexMost

HTML

<script src="https://unpkg.com/c-3po@0.2.2/dist/c3po.min.js"></script>
<div id='content-en'></div>
<div id='content-uk'></div>

JavaScript

// more about this example - https://c-3po.js.org/translations-without-transpile.html

// data from .po file (fetched with gettext-parser lib)
const ukLocale = {
  'headers': {
    'plural-forms': 'nplurals=3; plural=(n%10==1 && n%100!=11 ? 0 : n%10>=2 && n%10<=4 && (n%100<10 || n%100>=20) ? 1 : 2);'
  },
  'translations': {
    '': {
      '${ 0 } second': {
        'msgid': '${ 0 } second',
        'msgid_plural': '${ 0 } seconds',
        'msgstr': ['${ 0 } секунда','${ 0 } секунди','${ 0 } секунд']
      }
    }
  }
}

addLocale('uk', ukLocale);

const contentEn = document.getElementById('content-en');
const contentUk = document.getElementById('content-uk');

const view = (hours, minutes, seconds) => {
    const secondsTxt = ngettext(msgid`${seconds} second`, `${seconds} seconds`, seconds);
    return `<h3>${secondsTxt}</h3>`
};

setInterval(() => {
		const date = new Date();
    useLocale('en');
    contentEn.innerHTML = view(date.getHours(), date.getMinutes(),date.getSeconds());
    
    useLocale('uk');
    contentUk.innerHTML = view(date.getHours(), date.getMinutes(),date.getSeconds());
}, 1000);