Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
SPP 2143 Learning Through Connecting
ltc_website
Commits
bdd40116
Commit
bdd40116
authored
Feb 12, 2020
by
Elisabeth Reuhl
Browse files
Added i18n example
parent
42e44377
Changes
7
Hide whitespace changes
Inline
Side-by-side
public/locales/translationsAR.json
0 → 100644
View file @
bdd40116
{
"EntangledAfrica1"
:
"
املرتابطة
أفريقيا
"
,
"EntangledAfrica2"
:
"...... ca.
6.000
-
500
BP
"
}
\ No newline at end of file
public/locales/translationsDE.json
0 → 100644
View file @
bdd40116
{
"EntangledAfrica1"
:
"Entangled Africa"
,
"EntangledAfrica2"
:
"Innerafrikanische Beziehungen zwischen Regenwald und Mittelmeer, ca. 6.000 - 500 Jahre vor heute"
}
\ No newline at end of file
public/locales/translationsEN.json
0 → 100644
View file @
bdd40116
{
"EntangledAfrica1"
:
"Entangled Africa"
,
"EntangledAfrica2"
:
"Intra-African relations between rain forest and Mediterranean, ca. 6.000 - 500 BP"
}
\ No newline at end of file
public/locales/translationsFR.json
0 → 100644
View file @
bdd40116
{
"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
src/components/OurFirstComponentWithAllRelatedFiles/Headings.jsx
0 → 100644
View file @
bdd40116
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
src/components/index.js
View file @
bdd40116
//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
src/index.js
View file @
bdd40116
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
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment