terribleplan/next.js
1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
Code Issues Releases Wiki Activity

Update with-react-intl example (#4825)

Browse source 
Changes:
- added withIntl HOC because injectIntl do no hoist static methods
- fixed `Cannot read property 'locale' of undefined`
This commit is contained in:
Rustam Gilyaziev 2018-07-24 01:43:57 +03:00 committed by Tim Neutkens
parent b1222962f0
commit e2b518525c
5 changed files with 43 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
examples/with-react-intl/README.md
View file

@ -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

11
examples/with-react-intl/lib/withIntl.js Normal file
View file

@ -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)

1
examples/with-react-intl/package.json
View file

@ -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",

1
examples/with-react-intl/pages/_app.js
View file

@ -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}>

45
examples/with-react-intl/pages/index.js
View file

@ -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)