Skip to content

Commit 9efed17

Browse files
DevSpeakLuis Fernando Alvarez D
DevSpeak
authored and
Luis Fernando Alvarez D
committed
Update with-react-intl for v3 (vercel#8526)
* Update dependencies > Update dependencies * Changes to make v3 work > Use hook `useIntl` instead of HOC `injectIntl` > Change use of class components > Changes to dependencies * Small changes Small changes
1 parent 509d160 commit 9efed17

File tree

11 files changed

+65
-99
lines changed

11 files changed

+65
-99
lines changed

‎examples/with-react-intl/README.md

+1-2
Original file line numberDiff line numberDiff line change
@@ -46,10 +46,9 @@ This example app shows how to integrate [React Intl][] with Next.
4646
- Server-side language negotiation
4747
- React Intl locale data loading via `pages/_document.js` customization
4848
- React Intl integration with [custom App](https://github.com/zeit/next.js#custom-app) component
49-
- `<IntlProvider>` creation with `locale`, `messages`, and `initialNow` props
49+
- `<IntlProvider>` creation with `locale`, `messages` props
5050
- Default message extraction via `babel-plugin-react-intl` integration
5151
- Translation management via build script and customized Next server
52-
- withIntl HOC for pages because injectIntl do not hoist static methods.
5352

5453
### Translation Management
5554

‎examples/with-react-intl/components/Layout.js

+17-14
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import React from 'react'
2-
import { defineMessages, injectIntl } from 'react-intl'
1+
import { defineMessages, useIntl } from 'react-intl'
32
import Head from 'next/head'
43
import Nav from './Nav'
54

@@ -10,17 +9,21 @@ const messages = defineMessages({
109
}
1110
})
1211

13-
export default injectIntl(({ intl, title, children }) => (
14-
<div>
15-
<Head>
16-
<meta name='viewport' content='width=device-width, initial-scale=1' />
17-
<title>{title || intl.formatMessage(messages.title)}</title>
18-
</Head>
12+
export default ({ title, children }) => {
13+
const intl = useIntl()
1914

20-
<header>
21-
<Nav />
22-
</header>
15+
return (
16+
<div>
17+
<Head>
18+
<meta name='viewport' content='width=device-width, initial-scale=1' />
19+
<title>{title || intl.formatMessage(messages.title)}</title>
20+
</Head>
2321

24-
{children}
25-
</div>
26-
))
22+
<header>
23+
<Nav />
24+
</header>
25+
26+
{children}
27+
</div>
28+
)
29+
}

‎examples/with-react-intl/components/Nav.js

-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import React from 'react'
21
import { FormattedMessage } from 'react-intl'
32
import Link from 'next/link'
43

‎examples/with-react-intl/lang/en.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,4 @@
44
"nav.about": "About",
55
"description": "An example app integrating React Intl with Next.js",
66
"greeting": "Hello, World!"
7-
}
7+
}

‎examples/with-react-intl/lib/withIntl.js

-11
This file was deleted.

‎examples/with-react-intl/package.json

+8-7
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,16 @@
77
"start": "NODE_ENV=production node server.js"
88
},
99
"dependencies": {
10-
"accepts": "^1.3.3",
11-
"babel-plugin-react-intl": "^2.3.1",
12-
"glob": "^7.1.1",
13-
"hoist-non-react-statics": "^3.0.0-rc.1",
10+
"@formatjs/intl-relativetimeformat": "^2.8.2",
11+
"@formatjs/intl-utils": "^0.6.1",
12+
"accepts": "^1.3.7",
13+
"babel-plugin-react-intl": "^4.1.14",
14+
"glob": "^7.1.4",
1415
"intl": "^1.2.5",
1516
"next": "latest",
16-
"react": "^16.7.0",
17-
"react-dom": "^16.7.0",
18-
"react-intl": "^2.2.3"
17+
"react": "^16.9.0",
18+
"react-dom": "^16.9.0",
19+
"react-intl": "^3.1.12"
1920
},
2021
"license": "ISC"
2122
}

‎examples/with-react-intl/pages/_app.js

+4-14
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,6 @@
11
import App from 'next/app'
22
import React from 'react'
3-
import { IntlProvider, addLocaleData } from 'react-intl'
4-
5-
// Register React Intl's locale data for the user's locale in the browser. This
6-
// locale data was added to the page by `pages/_document.js`. This only happens
7-
// once, on initial page load in the browser.
8-
if (typeof window !== 'undefined' && window.ReactIntlLocaleData) {
9-
Object.keys(window.ReactIntlLocaleData).forEach(lang => {
10-
addLocaleData(window.ReactIntlLocaleData[lang])
11-
})
12-
}
3+
import { IntlProvider } from 'react-intl'
134

145
export default class MyApp extends App {
156
static async getInitialProps ({ Component, router, ctx }) {
@@ -23,16 +14,15 @@ export default class MyApp extends App {
2314
// In the browser, use the same values that the server serialized.
2415
const { req } = ctx
2516
const { locale, messages } = req || window.__NEXT_DATA__.props
26-
const initialNow = Date.now()
2717

28-
return { pageProps, locale, messages, initialNow }
18+
return { pageProps, locale, messages }
2919
}
3020

3121
render () {
32-
const { Component, pageProps, locale, messages, initialNow } = this.props
22+
const { Component, pageProps, locale, messages } = this.props
3323

3424
return (
35-
<IntlProvider locale={locale} messages={messages} initialNow={initialNow}>
25+
<IntlProvider locale={locale} messages={messages}>
3626
<Component {...pageProps} />
3727
</IntlProvider>
3828
)

‎examples/with-react-intl/pages/_document.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export default class IntlDocument extends Document {
1717

1818
render () {
1919
// Polyfill Intl API for older browsers
20-
const polyfill = `https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.${
20+
const polyfill = `https://cdn.polyfill.io/v3/polyfill.min.js?features=Intl.~locale.${
2121
this.props.locale
2222
}`
2323

‎examples/with-react-intl/pages/about.js

+16-21
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,19 @@
1-
import React, { Component } from 'react'
2-
import { FormattedRelative } from 'react-intl'
1+
import { FormattedRelativeTime } from 'react-intl'
2+
import { selectUnit } from '@formatjs/intl-utils'
33
import Layout from '../components/Layout'
44

5-
class About extends Component {
6-
static async getInitialProps ({ req }) {
7-
return { someDate: Date.now() }
8-
}
9-
10-
render () {
11-
return (
12-
<Layout>
13-
<p>
14-
<FormattedRelative
15-
value={this.props.someDate}
16-
updateInterval={1000}
17-
/>
18-
</p>
19-
</Layout>
20-
)
21-
}
5+
export default () => {
6+
const { value, unit } = selectUnit(Date.now())
7+
return (
8+
<Layout>
9+
<p>
10+
<FormattedRelativeTime
11+
numeric='auto'
12+
value={value}
13+
unit={unit}
14+
updateIntervalInSeconds={1}
15+
/>
16+
</p>
17+
</Layout>
18+
)
2219
}
23-
24-
export default About

‎examples/with-react-intl/pages/index.js

+16-26
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
import React, { Component } from 'react'
2-
import { FormattedMessage, FormattedNumber, defineMessages } from 'react-intl'
1+
import { FormattedMessage, FormattedNumber, defineMessages, useIntl } from 'react-intl'
32
import Head from 'next/head'
43
import Layout from '../components/Layout'
5-
import withIntl from '../lib/withIntl'
64

75
const { description } = defineMessages({
86
description: {
@@ -11,28 +9,20 @@ const { description } = defineMessages({
119
}
1210
})
1311

14-
class Index extends Component {
15-
static getInitialProps () {
16-
// Do something
17-
}
18-
19-
render () {
20-
const { intl } = this.props
12+
export default () => {
13+
const intl = useIntl()
2114

22-
return (
23-
<Layout>
24-
<Head>
25-
<meta name='description' content={intl.formatMessage(description)} />
26-
</Head>
27-
<p>
28-
<FormattedMessage id='greeting' defaultMessage='Hello, World!' />
29-
</p>
30-
<p>
31-
<FormattedNumber value={1000} />
32-
</p>
33-
</Layout>
34-
)
35-
}
15+
return (
16+
<Layout>
17+
<Head>
18+
<meta name='description' content={intl.formatMessage(description)} />
19+
</Head>
20+
<p>
21+
<FormattedMessage id='greeting' defaultMessage='Hello, World!' />
22+
</p>
23+
<p>
24+
<FormattedNumber value={1000} />
25+
</p>
26+
</Layout>
27+
)
3628
}
37-
38-
export default withIntl(Index)

‎examples/with-react-intl/server.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const localeDataCache = new Map()
2727
const getLocaleDataScript = locale => {
2828
const lang = locale.split('-')[0]
2929
if (!localeDataCache.has(lang)) {
30-
const localeDataFile = require.resolve(`react-intl/locale-data/${lang}`)
30+
const localeDataFile = require.resolve(`@formatjs/intl-relativetimeformat/dist/locale-data/${lang}`)
3131
const localeDataScript = readFileSync(localeDataFile, 'utf8')
3232
localeDataCache.set(lang, localeDataScript)
3333
}

0 commit comments

Comments
 (0)