ivanmiletic

{
  "main.header.welcome": "Bienvenue",
  "main.page.title": "{{title}} est en cours d'exécution!",
  "main.page.section.languages.title": "Langages",
  "main.page.section.languages.subtitle": "Essayons de changer de langue!"
}

ivanmiletic

import React from 'react';
import logo from './logo.svg';
import './App.css';

import { useTranslation } from 'react-i18next';

function App() {
  const title = 'react-i18next-translations';

  const { t } = useTranslation();

ivanmiletic

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import XHR from 'i18next-xhr-backend';

const allowedLanguages = ['en', 'fr'];

const defaultLng = 'en';
let lng = defaultLng;

const storageLanguage = localStorage.getItem('language');

ivanmiletic

import React from 'react';
import logo from './logo.svg';
import './App.css';

import { useTranslation } from 'react-i18next';

function App() {
  const title = 'react-i18next-translations';

  const { t } = useTranslation();

ivanmiletic

{
  "main.header.welcome": "Welcome",
  "main.page.title": "{{title}} is running!",
  "main.page.section.languages.title": "Languages",
  "main.page.section.languages.subtitle": "Lets try to change language!",
  "main.page.section.languages.english": "English",
  "main.page.section.languages.french": "Français"
}

ivanmiletic

import React, { Suspense } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

import './i18n';

ReactDOM.render(
  <Suspense fallback={(<div>Loading</div>)}>

ivanmiletic

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import XHR from 'i18next-xhr-backend';

i18n
.use(XHR)
.use(initReactI18next)
.init({
  debug: true,
  keySeparator: false,

ivanmiletic

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  const title = 'react-i18next-translations';

  return (
    <div className="app">
      <div className="toolbar" role="banner">

ivanmiletic

.app {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 14px;
  color: #333;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 8px;
}

ivanmiletic

<div class="card-container">
  <div class="card card-small" (click)="changeLanguage('en')">
    <span>{{'main.page.section.languages.english' | translate}}</span>
  </div>

  <div class="card card-small" (click)="changeLanguage('fr')">
    <span>{{'main.page.section.languages.french' | translate}}</span>
  </div>
</div>