Update with-react-intl example (#4825)

Changes: - added withIntl HOC because injectIntl do no hoist static methods - fixed `Cannot read property 'locale' of undefined`
vercel · Jul 23, 2018 · e2b5185 · e2b5185
1 parent b122296
commit e2b5185
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 16 deletions.
diff --git a/examples/with-react-intl/README.md b/examples/with-react-intl/README.md
@@ -50,6 +50,7 @@ This example app shows how to integrate [React Intl][] with Next.
 - `<IntlProvider>` creation with `locale`, `messages`, and `initialNow` props
 - Default message extraction via `babel-plugin-react-intl` integration
 - Translation management via build script and customized Next server
+- withIntl HOC for pages because injectIntl do not hoist static methods.
 
 ### Translation Management
 

diff --git a/examples/with-react-intl/lib/withIntl.js b/examples/with-react-intl/lib/withIntl.js
@@ -0,0 +1,11 @@
+import hoistNonReactStatics from 'hoist-non-react-statics'
+import { injectIntl } from 'react-intl'
+
+export const hoistStatics = (higherOrderComponent) => (BaseComponent) => {
+  const NewComponent = higherOrderComponent(BaseComponent)
+  hoistNonReactStatics(NewComponent, BaseComponent)
+
+  return NewComponent
+}
+
+export default hoistStatics(injectIntl)
diff --git a/examples/with-react-intl/package.json b/examples/with-react-intl/package.json
@@ -10,6 +10,7 @@
     "accepts": "^1.3.3",
     "babel-plugin-react-intl": "^2.3.1",
     "glob": "^7.1.1",
+    "hoist-non-react-statics": "^3.0.0-rc.1",
     "intl": "^1.2.5",
     "next": "latest",
     "react": "^16.0.0",

diff --git a/examples/with-react-intl/pages/_app.js b/examples/with-react-intl/pages/_app.js
@@ -30,6 +30,7 @@ export default class MyApp extends App {
   render () {
     const { Component, pageProps, locale, messages } = this.props
     const now = Date.now()
+
     return (
       <Container>
         <IntlProvider locale={locale} messages={messages} initialNow={now}>

diff --git a/examples/with-react-intl/pages/index.js b/examples/with-react-intl/pages/index.js
@@ -1,25 +1,38 @@
-import React from 'react'
-import {FormattedMessage, FormattedNumber, defineMessages, injectIntl} from 'react-intl'
+import React, { Component } from 'react'
+import { FormattedMessage, FormattedNumber, defineMessages } from 'react-intl'
 import Head from 'next/head'
 import Layout from '../components/Layout'
+import withIntl from '../lib/withIntl'
 
-const {description} = defineMessages({
+const { description } = defineMessages({
   description: {
     id: 'description',
     defaultMessage: 'An example app integrating React Intl with Next.js'
   }
 })
 
-export default injectIntl(({intl}) => (
-  <Layout>
-    <Head>
-      <meta name='description' content={intl.formatMessage(description)} />
-    </Head>
-    <p>
-      <FormattedMessage id='greeting' defaultMessage='Hello, World!' />
-    </p>
-    <p>
-      <FormattedNumber value={1000} />
-    </p>
-  </Layout>
-))
+class Index extends Component {
+  static getInitialProps () {
+    // Do something
+  }
+
+  render () {
+    const { intl } = this.props
+
+    return (
+      <Layout>
+        <Head>
+          <meta name='description' content={intl.formatMessage(description)} />
+        </Head>
+        <p>
+          <FormattedMessage id='greeting' defaultMessage='Hello, World!' />
+        </p>
+        <p>
+          <FormattedNumber value={1000} />
+        </p>
+      </Layout>
+    )
+  }
+}
+
+export default withIntl(Index)