JSFiddle - React, Tailwind, and code Playground

Fliplet component i18n example

by Hugo Carneiro

HTML

<script src="https://api.fliplet.com/sdk.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/19.4.4/i18next.min.js"></script>
<h1 data-i18n-key="component.login:title">Login</h1>
<p data-i18n-key="component.login:instruction">Enter your access details below</p>
<input type="email" class="form-control profile_email" name="Email" data-i18n-key="component.login:emailPlaceholder" data-i18n-type="attr" data-i18n-attr="placeholder" placeholder="Enter your email" autocomplete="false" />
<input type="password" class="form-control profile_password" data-i18n-key="component.login:passwordPlaceholder" data-i18n-type="attr" data-i18n-attr="placeholder" name="Password" placeholder="Enter your password" autocomplete="false" />
<p class="text-danger login-error hidden" data-i18n-key="component.login:mismatch">The details you entered don’t match our records. Please try again.</p>
<p><button class="btn btn-primary btn-login" type="submit">
  <span class="btn-label" data-i18n-key="component.login:action">Log in</span>
</button></p>

JavaScript

i18next.init({
  lng: 'ua',
  fallbackLng: 'en',
  resources: {
    ua: {
      'component.login': {
        title: 'Логін',
        instruction: 'Введіть ваші деталі',
        mismatch: 'Помилка. Спробуйте ще раз',
        action: 'Логін',
        loading: 'Loading...',
        emailPlaceholder: 'Enter your email address',
        passwordPlaceholder: 'Enter your password',
        loginError: 'Login error'
      }
    },
    zh: {
      'component.login': {
        title: '登入',
        instruction: '請填入帳號資料',
        mismatch: '您輸入的資料不符合我們的紀錄。請再嘗試一次。',
        action: '登入',
        loading: '載入中',
        emailPlaceholder: '輸入您的電子郵件',
        passwordPlaceholder: '輸入您的密碼',
        loginError: '登入失敗'
      }
    },
    it: {
      'component.login': {
        title: 'Accesso',
        instruction: 'Inserisci i dettagli di accesso di seguito',
        mismatch: 'I dettagli che hai inserito non corrispondono ai nostri record. Per favore riprova.',
        action: 'Accesso',
        loading: 'Caricamento in corso...',
        emailPlaceholder: 'Inserisci il tuo indirizzo email',
        passwordPlaceholder: 'Inserisci la tua password',
        loginError: 'Errore di accesso'
      }
    },
    pt: {
    	'component.login': {
        title: 'Entrar',
        instruction: 'Insira os detalhes de acesso abaixo',
        mismatch: 'Os detalhos de acesso inseridos não correspondem aos nossos registos. Por favor tente novamente.',
        action: 'Entrar',
        loading: 'A carrega...',
        emailPlaceholder: 'Insira o seu email',
        passwordPlaceholder: 'Insira a sua password',
        loginError: 'Erro ao entrar'
      }
    },
    en: {
      'component.login': {
        title: 'Login',
        instruction: 'Enter your access details below',
        mismatch: 'The details you entered don’t match our records. Please try again.',
        action: 'Login',
        loading: 'Loading...',
        emailPlaceholder: 'Enter your email address',
       ...