theodesp

import { I18nProvider } from '@lingui/react';
import catalogEl from './locales/el/messages.js';
import catalogEn from './locales/en/messages.js';
const catalogs = { en: catalogEn, el: catalogEl };

ReactDOM.render(
  <I18nProvider
    language={i18nConfig.locale}
    catalogs={catalogs}
  >

theodesp

$ npm run extract                          

> [email protected] extract /Users/itspare/WebstormProjects/react-i18n-libraries
> lingui extract

Catalog statistics:
┌─────────────┬─────────────┬─────────┐
│ Language    │ Total count │ Missing │
├─────────────┼─────────────┼─────────┤
│ el          │      7      │    7    │

theodesp

import React, {Component} from 'react';
import { withTranslation, Trans } from 'react-i18next';
import logo from './logo.svg';
import './Home.css';

class Home extends Component {

  render() {
    const { t, i18n } = this.props;

theodesp

import {I18nextProvider} from 'react-i18next';
import i18n from './i18n';

ReactDOM.render(
  <I18nextProvider i18n={ i18n }>
  <App />
</I18nextProvider>, document.getElementById('root'));

theodesp

import i18n from 'i18next';
import { initReactI18next } from "react-i18next";
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(initReactI18next)
  .use(LanguageDetector)
  .init({
    // we init with resources
    resources: {

theodesp

import intl from 'react-intl-universal';
 
intl.get('home.declarative'); // Simple text message
intl.getHtml('home.declarative.p1') // HTML message
intl.get('not-exist-key').defaultMessage('Μύνημα που δεν υπάρχει') // Default message
intl.get('home.welcome', {name:'React.js'}) // Message with variables.

theodesp

render() {
    return (
      this.state.initDone &&
      <Router>
        <Switch>
          <Route exact path="/" component={Home} />
        </Switch>
      </Router>
    );

theodesp

import React, {Component} from "react";

import intl from 'react-intl-universal';
// common locale data
require('intl/locale-data/jsonp/el.js');

export default class App extends Component {

  state = {initDone: false};

theodesp

const HomeHeader = () => {
  const intl = useIntl();
  return (
    <div className="Home-header">
      <img src={logo} className="Home-logo" alt="logo"/>
      <h2>{intl.formatMessage({id: 'home.welcome'}, {name: 'React.js'})}</h2>
    </div>
  )
};

theodesp

let i18nConfig = {
  locale: 'el',
  messages: {
    "home.welcome": "Καλώς 'Ηρθατε στο {name}!",
    "home.declarative": "Δηλωτικό",
    "home.declarative.p1": "To {name} καθιστά ανώφελη τη δημιουργία διαδραστικών διεπαφών χρήστη. Σχεδιάστε απλές προβολές για κάθε κράτος στο δικό σας\n" +
    "                εφαρμογή και το React θα ενημερώσει αποτελεσματικά και θα αποδώσει τα σωστά στοιχεία όταν τα δεδομένα σας\n" +
    "                αλλαγές.",
    "home.declarative.p2": "Οι δηλωτικές προβολές καθιστούν τον κώδικα πιο προβλέψιμο και πιο εύκολο στον εντοπισμό σφαλμάτων.",
    "home.component-based": "Βασισμένο σε στοιχεία",