Skip to content

Instantly share code, notes, and snippets.

🦄
Jumping over Rainbows...

Theofanis Despoudis theodesp

🦄
Jumping over Rainbows...
  • Teckro
  • Ireland
Block or report user

Report or block theodesp

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View messages.json
{
"home.component-based": "Βασισμένο σε στοιχεία",
"home.component-based.p1": "Δημιουργήστε ενσωματωμένα στοιχεία που διαχειρίζονται τη δική τους κατάσταση, και στη συνέχεια συνθέστε τα για να δημιουργήσετε σύνθετα UI.",
"home.component-based.p2": "Δεδομένου ότι η λογική συνιστωσών είναι γραμμένη σε JavaScript αντί για πρότυπα, μπορείτε εύκολα να περάσετε πλούσια δεδομένα μέσω της εφαρμογής σας και να κρατήσετε την κατάσταση εκτός του & nbsp; DOM.",
"home.declarative": "Δηλωτικό",
"home.declarative.p1": "To {name} καθιστά ανώφελη τη δημιουργία διαδραστικών διεπαφών χρήστη. Σχεδιάστε απλές προβολές για κάθε κράτος στο δικό σας εφαρμογή και το React θα ενημερώσει αποτελεσματικά και θα αποδώσει τα σωστά στοιχεία όταν τα δεδομένα σας αλλαγές.",
"home.declarative.p2": "Οι δηλωτικές προβολές καθιστούν τον κώδικα πιο προβλέψιμο και πιο εύκολο στον εντοπισμό σφαλμάτων.",
"home.welcome": "Καλώς 'Ηρθατε στο {name}!"
}
View Home.js
import React from 'react';
import {Trans} from "@lingui/macro"
import logo from './logo.svg'
import './Home.css';
const Home = ({name}) => {
return (
<div className="Home">
<div className="Home-header">
<img src={logo} className="Home-logo" alt="logo"/>
View .jslingui
{
"localeDir": "src/locales/",
"srcPathDirs": ["src/"],
"format": "minimal",
"fallbackLocale": "el",
"sourceLocale": "en"
}
View index.js
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}
>
View extract.sh
$ npm run extract
> react-i18n-libraries@0.1.0 extract /Users/itspare/WebstormProjects/react-i18n-libraries
> lingui extract
Catalog statistics:
┌─────────────┬─────────────┬─────────┐
│ Language │ Total count │ Missing │
├─────────────┼─────────────┼─────────┤
│ el │ 7 │ 7 │
View Home.js
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;
View index.js
import {I18nextProvider} from 'react-i18next';
import i18n from './i18n';
ReactDOM.render(
<I18nextProvider i18n={ i18n }>
<App />
</I18nextProvider>, document.getElementById('root'));
View i18n.js
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: {
View Home.js
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.
View App.js
render() {
return (
this.state.initDone &&
<Router>
<Switch>
<Route exact path="/" component={Home} />
</Switch>
</Router>
);
You can’t perform that action at this time.