Update with-react-i18next example (#3932)

- simplify pages by introducing withI18next hoc
- add Trans component example
- replace <div> with <p> in demo components to make text on pages easier to read

German translation by @marinaroot

examples/with-react-i18next/components/ComponentWithTrans.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import { Trans } from 'react-i18next'
+
+export default function ComponentWithTrans () {
+  return (
+    <p>
+      <Trans i18nKey='common:transComponent'>
+        Alternatively, you can use <code>Trans</code> component.
+      </Trans>
+    </p>
+  )
+}

examples/with-react-i18next/components/ExtendedComponent.js

@@ -1,14 +1,10 @@
 import React from 'react'
 import { translate } from 'react-i18next'
 
-function MyComponennt ({ t }) {
-  return (
-    <div>
-      {t('extendedComponent')}
-    </div>
-  )
+function MyComponent ({ t }) {
+  return <p>{t('extendedComponent')}</p>
 }
 
-const Extended = translate('common')(MyComponennt)
+const Extended = translate('common')(MyComponent)
 
 export default Extended

examples/with-react-i18next/components/PureComponent.js

@@ -1,10 +1,5 @@
 import React from 'react'
 
-// pure component just getting t function by props
 export default function PureComponent ({ t }) {
-  return (
-    <div>
-      {t('common:pureComponent')}
-    </div>
-  )
+  return <p>{t('common:pureComponent')}</p>
 }

examples/with-react-i18next/lib/withI18next.js

@@ -0,0 +1,24 @@
+import { translate } from 'react-i18next'
+import i18n from '../i18n'
+
+export const withI18next = (namespaces = ['common']) => ComposedComponent => {
+  const Extended = translate(namespaces, { i18n, wait: process.browser })(
+    ComposedComponent
+  )
+
+  Extended.getInitialProps = async (ctx) => {
+    const composedInitialProps = ComposedComponent.getInitialProps
+      ? await ComposedComponent.getInitialProps(ctx)
+      : {}
+
+    const i18nInitialProps =
+      ctx.req && !process.browser ? i18n.getInitialProps(ctx.req, namespaces) : {}
+
+    return {
+      ...composedInitialProps,
+      ...i18nInitialProps
+    }
+  }
+
+  return Extended
+}

examples/with-react-i18next/locales/de/common.json

@@ -1,5 +1,6 @@
 {
   "integrates_react-i18next": "Dieses Beispiel integriert react-i18next für einfache Übersetzung.",
   "pureComponent": "Entweder t Funktion an Komponente via props weiterreichen.",
-  "extendedComponent": "Oder die Komponente erneut mit dem translate hoc erweiteren."
+  "extendedComponent": "Oder die Komponente erneut mit dem translate hoc erweiteren.",
+  "transComponent": "Sonst können Sie auch die Komponente <1>Trans</1> verwenden."
 }

examples/with-react-i18next/locales/en/common.json

@@ -1,5 +1,6 @@
 {
-  "integrates_react-i18next": "this sample integrates react-i18next for simple internationalization.",
+  "integrates_react-i18next": "This example integrates react-i18next for simple internationalization.",
   "pureComponent": "You can either pass t function to child components.",
-  "extendedComponent": "Or wrap your component using the translate hoc provided by react-i18next."
+  "extendedComponent": "Or wrap your component using the translate hoc provided by react-i18next.",
+  "transComponent": "Alternatively, you can use <1>Trans</1> component."
 }

examples/with-react-i18next/pages/index.js

@@ -1,30 +1,20 @@
 import React from 'react'
 import Link from 'next/link'
-import { translate } from 'react-i18next'
-import i18n from '../i18n'
 
 import PureComponent from '../components/PureComponent'
 import ExtendedComponent from '../components/ExtendedComponent'
+import ComponentWithTrans from '../components/ComponentWithTrans'
+import { withI18next } from '../lib/withI18next'
 
-function Home ({ t, initialI18nStore }) {
-  return (
-    <div>
-      {t('welcome')}
-      <p>{t('common:integrates_react-i18next')}</p>
-      <PureComponent t={t} />
-      <ExtendedComponent />
-      <Link href='/page2'><a>{t('link.gotoPage2')}</a></Link>
-    </div>
-  )
-}
-
-const Extended = translate(['home', 'common'], { i18n, wait: process.browser })(Home)
-
-// Passing down initial translations
-// use req.i18n instance on serverside to avoid overlapping requests set the language wrong
-Extended.getInitialProps = async ({ req }) => {
-  if (req && !process.browser) return i18n.getInitialProps(req, ['home', 'common'])
-  return {}
-}
-
-export default Extended
+export default withI18next(['home', 'common'])(({ t, initialI18nStore }) => (
+  <div>
+    <h1>{t('welcome')}</h1>
+    <p>{t('common:integrates_react-i18next')}</p>
+    <PureComponent t={t} />
+    <ExtendedComponent />
+    <ComponentWithTrans />
+    <Link href='/page2'>
+      <a>{t('link.gotoPage2')}</a>
+    </Link>
+  </div>
+))

examples/with-react-i18next/pages/page2.js

@@ -1,30 +1,20 @@
 import React from 'react'
 import Link from 'next/link'
-import { translate } from 'react-i18next'
-import i18n from '../i18n'
 
 import PureComponent from '../components/PureComponent'
 import ExtendedComponent from '../components/ExtendedComponent'
+import ComponentWithTrans from '../components/ComponentWithTrans'
+import { withI18next } from '../lib/withI18next'
 
-function Page2 ({ t, initialI18nStore }) {
-  return (
-    <div>
-      {t('welcomePage2')}
-      <p>{t('common:integrates_react-i18next')}</p>
-      <PureComponent t={t} />
-      <ExtendedComponent />
-      <Link href='/'><a>{t('link.gotoPage1')}</a></Link>
-    </div>
-  )
-}
-
-const Extended = translate(['page2', 'common'], { i18n, wait: process.browser })(Page2)
-
-// Passing down initial translations
-// use req.i18n instance on serverside to avoid overlapping requests set the language wrong
-Extended.getInitialProps = async ({ req }) => {
-  if (req && !process.browser) return i18n.getInitialProps(req, ['page2', 'common'])
-  return {}
-}
-
-export default Extended
+export default withI18next(['page2', 'common'])(({ t, initialI18nStore }) => (
+  <div>
+    <h1>{t('welcomePage2')}</h1>
+    <p>{t('common:integrates_react-i18next')}</p>
+    <PureComponent t={t} />
+    <ExtendedComponent />
+    <ComponentWithTrans />
+    <Link href='/'>
+      <a>{t('link.gotoPage1')}</a>
+    </Link>
+  </div>
+))