JSFiddle - React, Tailwind, and code Playground

by AlexMost

HTML

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

JavaScript

// more about this example - https://c-3po.js.org/contexts.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': {
    '': {
      'Hello ${ name }': {
        'msgid': 'Hello ${ name }','msgstr': ['Вітаємо ${ name }']},
    },
    'ctx2': {
      'Hello ${ name }': {
        'msgid': 'Hello ${ name }','msgstr': ['Привіт ${ name }']},
    }
  }
}

addLocale('uk', ukLocale);
useLocale('uk');

const view = (name) => {
    return `
    <h2>${ t`Hello ${ name }` }</h2>
    <h3>${ c('ctx2').t`Hello ${ name }` }</h3>
    `
};
   
document.getElementById('content').innerHTML = view('Mike');