JSFiddle - React, Tailwind, and code Playground

by AlexMost

HTML

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

JavaScript

// data from .po file (fetched with gettext-parser lib)
const ukLocale = {
  'translations': {
    '': {
      'Hello ${ name }': {
        'msgid': 'Hello ${ name }',
        'msgstr': ['Привіт ${ name }'
        ]
      },
    }
  }
}

addLocale('uk', ukLocale);

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

const view = (name) => t`Hello ${ name }`

    
useLocale('en');
contentEn.innerHTML = view('Mike');

useLocale('uk');
contentUk.innerHTML = view('Mike');