-
Notifications
You must be signed in to change notification settings - Fork 8
/
App.scala
45 lines (41 loc) · 1.67 KB
/
App.scala
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
package demo
import org.scalablytyped.runtime.StringDictionary
import slinky.core.FunctionalComponent
import slinky.web.html._
import slinky.core.annotations.react
import typings.i18next.mod.{InterpolationOptions, TOptionsBase}
import typings.react.mod.CSSProperties
import typings.reactI18next.mod.useTranslation
import typings.reactI18next.components.Trans
import scala.scalajs.js
@react
object App {
type Props = Unit
val component = FunctionalComponent[Props] { _ =>
val js.Tuple3(t, i18n, _) = useTranslation()
div(className := "App")(
div(className := "App-header")(
h2(t("Welcome to React")),
button(onClick := { () => i18n.changeLanguage(I18n.de) })("de"),
button(onClick := { () => i18n.changeLanguage(I18n.en) })("en")
),
div(className := "App-intro")(
div(Trans()("To get started, edit ", code("src/App.js"), " and save to reload.")),
div(Trans.i18nKey("welcome")("trans")),
div(t("dog", TOptionsBase().setCount(1))),
div(t("dog", TOptionsBase().setCount(2))),
div(t("friend", TOptionsBase().setContext("male"))),
div(t("friend", TOptionsBase().setContext("female"))),
// interpolation not working
div(t("The author is", "John")),
// alternatives that fail as well
// div(t("The author is", TOptionsBase().setDefaultValue("John"))),
// div(t("The author is", TOptionsBase().setInterpolation(InterpolationOptions().setDefaultVariables(StringDictionary("author" -> "John")))))
),
div(style := CSSProperties().setMarginTop(40))(
"Learn more ",
a(href := "https://react.i18next.com")("https://react.i18next.com")
)
)
}
}