diff --git a/examples/with-react-intl/README.md b/examples/with-react-intl/README.md index 4206d96768c9e..12f1a65f6da93 100644 --- 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. - `` 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 new file mode 100644 index 0000000000000..16d9a0cd07ed2 --- /dev/null +++ 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 index e1aabdb41dd42..9f8eaeedbceb9 100644 --- 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 index 4e8972e148c93..7fcc17ef7113e 100644 --- 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 ( diff --git a/examples/with-react-intl/pages/index.js b/examples/with-react-intl/pages/index.js index 61a67d68de9f0..3cfc88905dcc9 100644 --- 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}) => ( - - - - -

- -

-

- -

- -)) +class Index extends Component { + static getInitialProps () { + // Do something + } + + render () { + const { intl } = this.props + + return ( + + + + +

+ +

+

+ +

+ + ) + } +} + +export default withIntl(Index)