Commit bdd40116 authored by Elisabeth Reuhl's avatar Elisabeth Reuhl
Browse files

Added i18n example

parent 42e44377
{
"EntangledAfrica1": "املرتابطة أفريقيا",
"EntangledAfrica2": "...... ca. 6.000 - 500 BP"
}
\ No newline at end of file
{
"EntangledAfrica1": "Entangled Africa",
"EntangledAfrica2": "Innerafrikanische Beziehungen zwischen Regenwald und Mittelmeer, ca. 6.000 - 500 Jahre vor heute"
}
\ No newline at end of file
{
"EntangledAfrica1": "Entangled Africa",
"EntangledAfrica2": "Intra-African relations between rain forest and Mediterranean, ca. 6.000 - 500 BP"
}
\ No newline at end of file
{
"EntangledAfrica1": "Entangled Africa",
"EntangledAfrica2": "Les relations interafricaines entre la forêt subsaharienne et la Méditerranée, ca. 6.000 - 500 ans avant aujourd‘hui"
}
\ No newline at end of file
import React from 'react';
// the hook
import { useTranslation } from 'react-i18next';
export const Headings = () => {
const { t, i18n } = useTranslation();
return([
<h1>{t('EntangledAfrica1')}</h1>,
<h2>{t('EntangledAfrica2')}</h2>
])
};
\ No newline at end of file
//this index.js exports all components from the sub folders
//by doing this all components can be imported from './components/';
//named exports are used instead of default export; thus imports need to be destructured
export { HelloComputerButton } from './HelloComputerButton/HelloComputerButton';
\ No newline at end of file
export { HelloComputerButton } from './HelloComputerButton/HelloComputerButton';
export { Headings } from './OurFirstComponentWithAllRelatedFiles/Headings';
\ No newline at end of file
import React, { useState, useContext } from 'react';
import ReactDOM from 'react-dom';
import { HelloComputerButton } from './components/';
import { Headings } from './components/';
import { LabelsContext, SettingsContext } from './Contexts';
import { INIT_LABELS, INIT_SETTINGS } from "./INIT_VALUES";
import './index.css';
import './i18n';
import { useTranslation } from 'react-i18next';
const App = () => {
const { t, i18n } = useTranslation();
const changeLanguage = lng => {
i18n.changeLanguage(lng);
};
const [labels, setLabels] = useState(INIT_LABELS);
const [settings, setSettings] = useState(INIT_SETTINGS);
......@@ -23,10 +32,15 @@ const App = () => {
default:
console.log("How did we even get here?");
}
}
};
return(
<LabelsContext.Provider value={labels} ><SettingsContext.Provider value={settings}>
<button onClick={() => changeLanguage('de')}>Deutsch</button>
<button onClick={() => changeLanguage('en')}>English</button>
<button onClick={() => changeLanguage('fr')}>Français</button>
<button onClick={() => changeLanguage('ar')}>لعربية</button>
<Headings />
<div>
<span>{labels.HelloWorld[settings.language]}</span><br />
<HelloComputerButton />
......@@ -37,4 +51,4 @@ const App = () => {
);
};
ReactDOM.render(<App />, document.getElementById('app' ))
\ No newline at end of file
ReactDOM.render(<App />, document.getElementById('app' ));
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment