react-intl 6.0.6 → 6.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (147) hide show
  1. package/index.d.ts +43 -0
  2. package/index.d.ts.map +1 -0
  3. package/index.js +51 -0
  4. package/lib/index.d.ts +43 -0
  5. package/lib/index.d.ts.map +1 -0
  6. package/lib/index.js +26 -0
  7. package/lib/src/components/createFormattedComponent.d.ts +29 -0
  8. package/lib/src/components/createFormattedComponent.d.ts.map +1 -0
  9. package/lib/src/components/createFormattedComponent.js +62 -0
  10. package/lib/src/components/dateTimeRange.d.ts +11 -0
  11. package/lib/src/components/dateTimeRange.d.ts.map +1 -0
  12. package/lib/src/components/dateTimeRange.js +15 -0
  13. package/lib/src/components/injectIntl.d.ts +22 -0
  14. package/lib/src/components/injectIntl.d.ts.map +1 -0
  15. package/lib/src/components/injectIntl.js +29 -0
  16. package/lib/src/components/message.d.ts +12 -0
  17. package/lib/src/components/message.d.ts.map +1 -0
  18. package/lib/src/components/message.js +35 -0
  19. package/lib/src/components/plural.d.ts +15 -0
  20. package/lib/src/components/plural.d.ts.map +1 -0
  21. package/lib/src/components/plural.js +26 -0
  22. package/lib/src/components/provider.d.ts +35 -0
  23. package/lib/src/components/provider.d.ts.map +1 -0
  24. package/lib/src/components/provider.js +112 -0
  25. package/lib/src/components/relative.d.ts +12 -0
  26. package/lib/src/components/relative.d.ts.map +1 -0
  27. package/lib/src/components/relative.js +129 -0
  28. package/lib/src/components/useIntl.d.ts +3 -0
  29. package/lib/src/components/useIntl.d.ts.map +1 -0
  30. package/lib/src/components/useIntl.js +8 -0
  31. package/lib/src/types.d.ts +12 -0
  32. package/lib/src/types.d.ts.map +1 -0
  33. package/lib/src/types.js +1 -0
  34. package/lib/src/utils.d.ts +14 -0
  35. package/lib/src/utils.d.ts.map +1 -0
  36. package/lib/src/utils.js +43 -0
  37. package/package.json +9 -9
  38. package/react-intl.iife.js +4688 -0
  39. package/src/components/createFormattedComponent.d.ts +29 -0
  40. package/src/components/createFormattedComponent.d.ts.map +1 -0
  41. package/src/components/createFormattedComponent.js +69 -0
  42. package/src/components/dateTimeRange.d.ts +11 -0
  43. package/src/components/dateTimeRange.d.ts.map +1 -0
  44. package/src/components/dateTimeRange.js +17 -0
  45. package/src/components/injectIntl.d.ts +22 -0
  46. package/src/components/injectIntl.d.ts.map +1 -0
  47. package/src/components/injectIntl.js +33 -0
  48. package/src/components/message.d.ts +12 -0
  49. package/src/components/message.d.ts.map +1 -0
  50. package/src/components/message.js +37 -0
  51. package/src/components/plural.d.ts +15 -0
  52. package/src/components/plural.d.ts.map +1 -0
  53. package/src/components/plural.js +29 -0
  54. package/src/components/provider.d.ts +35 -0
  55. package/src/components/provider.d.ts.map +1 -0
  56. package/src/components/provider.js +116 -0
  57. package/src/components/relative.d.ts +12 -0
  58. package/src/components/relative.d.ts.map +1 -0
  59. package/src/components/relative.js +131 -0
  60. package/src/components/useIntl.d.ts +3 -0
  61. package/src/components/useIntl.d.ts.map +1 -0
  62. package/src/components/useIntl.js +12 -0
  63. package/src/types.d.ts +12 -0
  64. package/src/types.d.ts.map +1 -0
  65. package/src/types.js +2 -0
  66. package/src/utils.d.ts +14 -0
  67. package/src/utils.d.ts.map +1 -0
  68. package/src/utils.js +49 -0
  69. package/BUILD +0 -130
  70. package/CHANGELOG.md +0 -1384
  71. package/example-sandboxes/rescripts/.rescriptsrc.js +0 -28
  72. package/example-sandboxes/rescripts/package-lock.json +0 -18035
  73. package/example-sandboxes/rescripts/package.json +0 -35
  74. package/example-sandboxes/rescripts/public/index.html +0 -42
  75. package/example-sandboxes/rescripts/src/App.tsx +0 -16
  76. package/example-sandboxes/rescripts/src/index.tsx +0 -5
  77. package/example-sandboxes/rescripts/src/react-app-env.d.ts +0 -1
  78. package/example-sandboxes/rescripts/src/styles.css +0 -4
  79. package/example-sandboxes/rescripts/tsconfig.json +0 -20
  80. package/example-sandboxes/strict-locale-type/.env +0 -1
  81. package/example-sandboxes/strict-locale-type/package-lock.json +0 -14595
  82. package/example-sandboxes/strict-locale-type/package.json +0 -35
  83. package/example-sandboxes/strict-locale-type/src/App.tsx +0 -48
  84. package/example-sandboxes/strict-locale-type/src/index.html +0 -28
  85. package/example-sandboxes/strict-locale-type/src/index.tsx +0 -7
  86. package/example-sandboxes/strict-locale-type/src/styles.css +0 -4
  87. package/example-sandboxes/strict-locale-type/tsconfig.json +0 -7
  88. package/example-sandboxes/strict-message-types/.env +0 -1
  89. package/example-sandboxes/strict-message-types/package-lock.json +0 -14596
  90. package/example-sandboxes/strict-message-types/package.json +0 -35
  91. package/example-sandboxes/strict-message-types/src/App.tsx +0 -31
  92. package/example-sandboxes/strict-message-types/src/index.html +0 -28
  93. package/example-sandboxes/strict-message-types/src/index.tsx +0 -7
  94. package/example-sandboxes/strict-message-types/src/styles.css +0 -4
  95. package/example-sandboxes/strict-message-types/tsconfig.json +0 -7
  96. package/examples/BUILD +0 -70
  97. package/examples/Bug2727.tsx +0 -37
  98. package/examples/HandleChange.tsx +0 -48
  99. package/examples/Hooks.tsx +0 -126
  100. package/examples/Injected.tsx +0 -41
  101. package/examples/Messages.tsx +0 -82
  102. package/examples/StaticTypeSafetyAndCodeSplitting/StaticTypeSafetyAndCodeSplitting.tsx +0 -44
  103. package/examples/StaticTypeSafetyAndCodeSplitting/en.json +0 -3
  104. package/examples/StaticTypeSafetyAndCodeSplitting/intlHelpers.tsx +0 -39
  105. package/examples/StaticTypeSafetyAndCodeSplitting/it.json +0 -3
  106. package/examples/TimeZone.tsx +0 -44
  107. package/examples/advanced/Advanced.tsx +0 -68
  108. package/examples/advanced/compiled-lang/en.json +0 -77
  109. package/examples/advanced/compiled-lang/fr.json +0 -77
  110. package/examples/index.html +0 -20
  111. package/examples/index.tsx +0 -44
  112. package/examples/package.json +0 -20
  113. package/index.ts +0 -127
  114. package/jest.config.js +0 -27
  115. package/src/components/createFormattedComponent.tsx +0 -123
  116. package/src/components/dateTimeRange.tsx +0 -26
  117. package/src/components/injectIntl.tsx +0 -111
  118. package/src/components/message.tsx +0 -73
  119. package/src/components/plural.tsx +0 -45
  120. package/src/components/provider.tsx +0 -196
  121. package/src/components/relative.tsx +0 -192
  122. package/src/components/useIntl.ts +0 -10
  123. package/src/types.ts +0 -29
  124. package/src/utils.ts +0 -77
  125. package/tests/functional/index.ts +0 -18
  126. package/tests/functional/support/build.ts +0 -16
  127. package/tests/functional/support/format.tsx +0 -112
  128. package/tests/perf/index.tsx +0 -196
  129. package/tests/setup.js +0 -10
  130. package/tests/unit/components/__snapshots__/displayName.tsx.snap +0 -19
  131. package/tests/unit/components/__snapshots__/message.tsx.snap +0 -41
  132. package/tests/unit/components/__snapshots__/relative.tsx.snap +0 -11
  133. package/tests/unit/components/__snapshots__/useIntl.tsx.snap +0 -25
  134. package/tests/unit/components/date.tsx +0 -233
  135. package/tests/unit/components/dateTimeRange.tsx +0 -103
  136. package/tests/unit/components/displayName.tsx +0 -57
  137. package/tests/unit/components/message.tsx +0 -509
  138. package/tests/unit/components/number.tsx +0 -198
  139. package/tests/unit/components/plural.tsx +0 -116
  140. package/tests/unit/components/provider.tsx +0 -215
  141. package/tests/unit/components/relative.tsx +0 -263
  142. package/tests/unit/components/time.tsx +0 -242
  143. package/tests/unit/components/useIntl.tsx +0 -64
  144. package/tests/unit/components/withIntl.tsx +0 -66
  145. package/tests/unit/react-intl.ts +0 -88
  146. package/tests/unit/testUtils.tsx +0 -42
  147. package/tsconfig.json +0 -5
package/example-sandboxes/strict-message-types/package.json DELETED
@@ -1,35 +0,0 @@
1
- {
2
- "name": "strict-message-types",
3
- "version": "1.0.0",
4
- "description": "React and TypeScript example starter project",
5
- "keywords": [
6
- "typescript",
7
- "react",
8
- "starter"
9
- ],
10
- "dependencies": {
11
- "parcel": "^2.0.0"
12
- },
13
- "devDependencies": {
14
- "@types/react": "17.0.20",
15
- "@types/react-dom": "17.0.9",
16
- "typescript": "4.4.2"
17
- },
18
- "scripts": {
19
- "start": "parcel src/index.html",
20
- "tsc": "tsc --noEmit"
21
- },
22
- "browserslist": [
23
- ">0.2%",
24
- "not dead",
25
- "not ie <= 11",
26
- "not op_mini all"
27
- ],
28
- "alias": {
29
- "@formatjs/*": "workspace:*",
30
- "intl-messageformat": "../../../../bazel-out/darwin-fastbuild/bin/packages/intl-messageformat",
31
- "babel-plugin-formatjs": "../../../../bazel-out/darwin-fastbuild/bin/packages/babel-plugin-formatjs",
32
- "eslint-plugin-formatjs": "../../../../bazel-out/darwin-fastbuild/bin/packages/eslint-plugin-formatjs",
33
- "react-intl": "../../../../bazel-out/darwin-fastbuild/bin/packages/react-intl"
34
- }
35
- }
package/example-sandboxes/strict-message-types/src/App.tsx DELETED
@@ -1,31 +0,0 @@
1
- import React from 'react'
2
- import './styles.css'
3
- import {IntlProvider, FormattedMessage} from 'react-intl'
4
-
5
- const messages = {
6
- title: 'Hello CodeSandbox',
7
- content: 'Start editing to see some magic happen!',
8
- }
9
-
10
- declare global {
11
- namespace FormatjsIntl {
12
- interface Message {
13
- ids: keyof typeof messages
14
- }
15
- }
16
- }
17
-
18
- export default function App() {
19
- return (
20
- <IntlProvider locale="en" messages={messages}>
21
- <div className="App">
22
- <h1>
23
- <FormattedMessage id="title" />
24
- </h1>
25
- <h2>
26
- <FormattedMessage id="content" />
27
- </h2>
28
- </div>
29
- </IntlProvider>
30
- )
31
- }
package/example-sandboxes/strict-message-types/src/index.html DELETED
@@ -1,28 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta
6
- name="viewport"
7
- content="width=device-width, initial-scale=1, shrink-to-fit=no"
8
- />
9
- <meta name="theme-color" content="#000000" />
10
- <title>React App</title>
11
- </head>
12
-
13
- <body>
14
- <noscript> You need to enable JavaScript to run this app. </noscript>
15
- <div id="root"></div>
16
- <!--
17
- This HTML file is a template.
18
- If you open it directly in the browser, you will see an empty page.
19
-
20
- You can add webfonts, meta tags, or analytics to this file.
21
- The build step will place the bundled scripts into the <body> tag.
22
-
23
- To begin the development, run `npm start` or `yarn start`.
24
- To create a production bundle, use `npm run build` or `yarn build`.
25
- -->
26
- <script type="module" src="index.tsx"></script>
27
- </body>
28
- </html>
package/example-sandboxes/strict-message-types/src/index.tsx DELETED
@@ -1,7 +0,0 @@
1
- import React from 'react'
2
- import ReactDOM from 'react-dom'
3
-
4
- import App from './App'
5
-
6
- const rootElement = document.getElementById('root')
7
- ReactDOM.render(<App />, rootElement)
package/example-sandboxes/strict-message-types/src/styles.css DELETED
@@ -1,4 +0,0 @@
1
- .App {
2
- font-family: sans-serif;
3
- text-align: center;
4
- }
package/example-sandboxes/strict-message-types/tsconfig.json DELETED
@@ -1,7 +0,0 @@
1
- {
2
- "extends": "../../tsconfig.json",
3
- "include": ["src"],
4
- "compilerOptions": {
5
- "skipLibCheck": true
6
- }
7
- }
package/examples/BUILD DELETED
@@ -1,70 +0,0 @@
1
- load("@aspect_bazel_lib//lib:copy_to_bin.bzl", "copy_to_bin")
2
- load("@aspect_rules_esbuild//esbuild:defs.bzl", "esbuild")
3
- load("@aspect_rules_ts//ts:defs.bzl", "ts_project")
4
- load("@npm//:defs.bzl", "npm_link_all_packages")
5
- load("@npm//:http-server/package_json.bzl", "bin")
6
-
7
- npm_link_all_packages(name = "node_modules")
8
-
9
- EXAMPLES_SRC_DEPS = [
10
- ":node_modules/@formatjs/ecma402-abstract",
11
- ":node_modules/@formatjs/intl-datetimeformat",
12
- ":node_modules/@formatjs/intl-getcanonicallocales",
13
- ":node_modules/@formatjs/intl-locale",
14
- ":node_modules/intl-messageformat",
15
- ":node_modules/@formatjs/icu-messageformat-parser",
16
- ":node_modules/@formatjs/intl-numberformat",
17
- ":node_modules/@formatjs/intl-pluralrules",
18
- ":node_modules/react-intl",
19
- "//:node_modules/core-js",
20
- "//:node_modules/@types/react",
21
- "//:node_modules/@types/react-dom",
22
- "//:node_modules/react",
23
- "//:node_modules/react-dom",
24
- "//:node_modules/tslib",
25
- ]
26
-
27
- ts_project(
28
- name = "examples-esm",
29
- srcs = glob(
30
- [
31
- "**/*.ts",
32
- "**/*.tsx",
33
- "**/*.json",
34
- ],
35
- exclude = ["package.json"],
36
- ),
37
- declaration = True,
38
- declaration_map = True,
39
- extends = "//:tsconfig",
40
- out_dir = "examples-lib",
41
- resolve_json_module = True,
42
- tsconfig = "//:tsconfig.esm",
43
- deps = EXAMPLES_SRC_DEPS,
44
- )
45
-
46
- esbuild(
47
- name = "main",
48
- define = {
49
- "process.env.NODE_ENV": "development",
50
- },
51
- entry_point = "examples-lib/index.js",
52
- format = "iife",
53
- deps = [":examples-esm"] + EXAMPLES_SRC_DEPS,
54
- )
55
-
56
- copy_to_bin(
57
- name = "index",
58
- srcs = ["index.html"],
59
- )
60
-
61
- bin.http_server_binary(
62
- name = "examples",
63
- data = [
64
- ":index",
65
- ":main",
66
- ],
67
- args = [
68
- "packages/react-intl/examples",
69
- ],
70
- )
package/examples/Bug2727.tsx DELETED
@@ -1,37 +0,0 @@
1
- import React, {useState} from 'react'
2
- import {IntlProvider, FormattedRelativeTime, useIntl} from 'react-intl'
3
-
4
- const getRelativeTime = (date: Date) =>
5
- (date.getTime() - new Date().getTime()) / 1000
6
-
7
- const PostDate: React.FC<{date: Date}> = ({date}) => {
8
- const intl = useIntl()
9
- return (
10
- <span title={intl.formatDate(date)}>
11
- <FormattedRelativeTime
12
- value={getRelativeTime(date)}
13
- updateIntervalInSeconds={1}
14
- />
15
- </span>
16
- )
17
- }
18
-
19
- export const App: React.FC<{}> = () => {
20
- const [hide, setHide] = useState(false)
21
- return (
22
- <IntlProvider locale={navigator.language}>
23
- <div>
24
- <h1>Hello world</h1>
25
- {!hide && (
26
- <p>
27
- <PostDate date={new Date()} />
28
- </p>
29
- )}
30
-
31
- <button onClick={() => setHide(current => !current)}>
32
- Toggle FormattedRelativeTime
33
- </button>
34
- </div>
35
- </IntlProvider>
36
- )
37
- }
package/examples/HandleChange.tsx DELETED
@@ -1,48 +0,0 @@
1
- import * as React from 'react'
2
- import {createIntl, createIntlCache, RawIntlProvider} from 'react-intl'
3
-
4
- const messages: Record<string, Record<string, string>> = {
5
- 'en-US': {selectalanguage: 'Select a language'},
6
- 'pt-BR': {selectalanguage: 'Selecione uma linguagem'},
7
- }
8
-
9
- const initialLocale = 'en-US'
10
- export const cache = createIntlCache()
11
- /** You can use this variable in other files even after reassigning it. */
12
- export let intl = createIntl(
13
- {locale: initialLocale, messages: messages[initialLocale]},
14
- cache
15
- )
16
- export let fmt = intl.formatMessage
17
-
18
- const App: React.FC = () => {
19
- // You could use redux to get the locale or get it from the url.
20
- const [locale, setLocale] = React.useState(initialLocale)
21
-
22
- const changeLanguage = (newLocale: string): void => {
23
- intl = createIntl({locale: newLocale, messages: messages[newLocale]}, cache)
24
- fmt = intl.formatMessage
25
- document.documentElement.lang = newLocale
26
- setLocale(newLocale)
27
- }
28
-
29
- return (
30
- <RawIntlProvider value={intl}>
31
- <h1>{fmt({id: 'selectalanguage'})}</h1>
32
- <select
33
- name="locale"
34
- defaultValue={locale}
35
- id="locale"
36
- onChange={(event): void => changeLanguage(event.target.value)}
37
- >
38
- {Object.keys(messages).map(locale => (
39
- <option key={locale} value={locale}>
40
- {locale}
41
- </option>
42
- ))}
43
- </select>
44
- </RawIntlProvider>
45
- )
46
- }
47
-
48
- export default App
package/examples/Hooks.tsx DELETED
@@ -1,126 +0,0 @@
1
- /**
2
- * A very similar example using `<FormattedMessage {...} />`
3
- * instead of `formatMessage({...})` is available @ `./Messages.tsx`
4
- */
5
-
6
- import * as React from 'react'
7
- import {IntlProvider, useIntl} from 'react-intl'
8
-
9
- interface Props {}
10
-
11
- const messages = {
12
- simple: 'Hello world',
13
- placeholder: 'Hello {name}',
14
- date: 'Hello {ts, date}',
15
- time: 'Hello {ts, time}',
16
- number: 'Hello {num, number}',
17
- plural: 'I have {num, plural, one {# dog} other {# dogs}}',
18
- select: 'I am a {gender, select, male {boy} female {girl}}',
19
- selectordinal: `I am the {order, selectordinal,
20
- one {#st person}
21
- two {#nd person}
22
- =3 {#rd person}
23
- other {#th person}
24
- }`,
25
- richtext: 'I have <bold>{num, plural, one {# dog} other {# dogs}}</bold>',
26
- richertext:
27
- 'I have & < &nbsp; <bold>{num, plural, one {# & dog} other {# dogs}}</bold>',
28
- unicode: 'Hello\u0020{placeholder}',
29
- }
30
-
31
- /**
32
- * @NOTE
33
- *
34
- * `<IntlProvider>` needs to exist in the component ancestry
35
- * BEFORE using the `useIntl()` hook,
36
- * as shown in the `App` component below
37
- *
38
- * ```tsx
39
- * interface Props {}
40
- *
41
- * const Wrapper: React.FC<Props> = (props) => {
42
- * return (
43
- * <IntlProvider locale="en" messages={messages}>
44
- * <Hooks {...props} />
45
- * </IntlProvider>
46
- * );
47
- * };
48
- * ```
49
- *
50
- */
51
- const Hooks: React.FC<Props> = () => {
52
- const {formatMessage: f} = useIntl()
53
-
54
- return (
55
- /* <IntlProvider locale="en" messages={messages}> */
56
- <>
57
- <p>
58
- {/* <FormattedMessage id="simple" /> */}
59
- {f({id: 'simple'})}
60
- <br />
61
- {/* <FormattedMessage id="placeholder" values={{name: 'John'}} /> */}
62
- {f({id: 'placeholder'}, {name: 'John'})}
63
- <br />
64
- {/* <FormattedMessage id="date" values={{ts: Date.now()}} /> */}
65
- {f({id: 'date'}, {ts: Date.now()})}
66
- <br />
67
- {/* <FormattedMessage id="time" values={{ts: Date.now()}} /> */}
68
- {f({id: 'time'}, {ts: Date.now()})}
69
- <br />
70
- {/* <FormattedMessage id="number" values={{num: Math.random() * 1000}} /> */}
71
- {f({id: 'number'}, {num: Math.random() * 1000})}
72
- <br />
73
- {/* <FormattedMessage id="plural" values={{num: 1}} /> */}
74
- {f({id: 'plural'}, {num: 1})}
75
- <br />
76
- {/* <FormattedMessage id="plural" values={{num: 99}} /> */}
77
- {f({id: 'plural'}, {num: 99})}
78
- <br />
79
- {/* <FormattedMessage id="select" values={{gender: 'male'}} /> */}
80
- {f({id: 'select'}, {gender: 'male'})}
81
- <br />
82
- {/* <FormattedMessage id="select" values={{gender: 'female'}} /> */}
83
- {f({id: 'select'}, {gender: 'female'})}
84
- <br />
85
- {f({id: 'selectordinal'}, {order: 1})}
86
- <br />
87
- {/* <FormattedMessage id="selectordinal" values={{order: 2}} /> */}
88
- {f({id: 'selectordinal'}, {order: 2})}
89
- <br />
90
- {/* <FormattedMessage id="selectordinal" values={{order: 3}} /> */}
91
- {f({id: 'selectordinal'}, {order: 3})}
92
- <br />
93
- {/* <FormattedMessage id="selectordinal" values={{order: 4}} /> */}
94
- {f({id: 'selectordinal'}, {order: 4})}
95
- <br />
96
- {/* <FormattedMessage id="unicode" values={{placeholder: 'world'}} /> */}
97
- {f({id: 'unicode'}, {placeholder: 'world'})}
98
- <br />
99
- {/* <FormattedMessage
100
- id="whatever"
101
- defaultMessage="Hello\u0020{placeholder}"
102
- values={{placeholder: 'world'}}
103
- /> */}
104
- {f(
105
- {id: 'whatever', defaultMessage: 'Hello\u0020{placeholder}'},
106
- {placeholder: 'world'}
107
- )}
108
- </p>
109
- </>
110
- /* </IntlProvider> */
111
- )
112
- }
113
-
114
- Hooks.defaultProps = {
115
- currentTime: new Date(),
116
- }
117
-
118
- const App: React.FC<Props> = props => {
119
- return (
120
- <IntlProvider locale="en" messages={messages}>
121
- <Hooks {...props} />
122
- </IntlProvider>
123
- )
124
- }
125
-
126
- export default App
package/examples/Injected.tsx DELETED
@@ -1,41 +0,0 @@
1
- import * as React from 'react'
2
- import {IntlProvider, useIntl, injectIntl, IntlShape} from 'react-intl'
3
-
4
- const Comp: React.FC<{}> = _ => {
5
- const {formatDate} = useIntl()
6
- return <h1>{formatDate(Date.now())}</h1>
7
- }
8
-
9
- const Comp2: React.FC<{intl: IntlShape}> = ({
10
- intl: {formatDate, formatTime},
11
- }) => {
12
- return (
13
- <>
14
- <h1>{formatDate(new Date(), {month: 'long'})}</h1>
15
- <h2>{formatTime(undefined)}</h2>
16
- </>
17
- )
18
- }
19
-
20
- const Comp2WithIntl = injectIntl(Comp2)
21
-
22
- interface Props {
23
- currentTime?: Date | number
24
- }
25
-
26
- const App: React.FC<Props> = _ => {
27
- return (
28
- <IntlProvider locale="en" timeZone="Asia/Tokyo">
29
- <div>
30
- <Comp />
31
- <Comp2WithIntl />
32
- </div>
33
- </IntlProvider>
34
- )
35
- }
36
-
37
- App.defaultProps = {
38
- currentTime: new Date(),
39
- }
40
-
41
- export default App
package/examples/Messages.tsx DELETED
@@ -1,82 +0,0 @@
1
- import * as React from 'react'
2
- import {IntlProvider, FormattedMessage} from 'react-intl'
3
-
4
- interface Props {}
5
-
6
- const messages = {
7
- simple: 'Hello world',
8
- placeholder: 'Hello {name}',
9
- date: 'Hello {ts, date}',
10
- time: 'Hello {ts, time}',
11
- number: 'Hello {num, number}',
12
- plural: 'I have {num, plural, one {# dog} other {# dogs}}',
13
- select: 'I am a {gender, select, male {boy} female {girl}}',
14
- selectordinal: `I am the {order, selectordinal,
15
- one {#st person}
16
- two {#nd person}
17
- =3 {#rd person}
18
- other {#th person}
19
- }`,
20
- richtext: 'I have <bold>{num, plural, one {# dog} other {# dogs}}</bold>',
21
- richertext:
22
- 'I have & < &nbsp; <bold>{num, plural, one {# & dog} other {# dogs}}</bold>',
23
- unicode: 'Hello\u0020{placeholder}',
24
- }
25
-
26
- const App: React.FC<Props> = () => {
27
- return (
28
- <IntlProvider locale="en" messages={messages}>
29
- <p>
30
- <FormattedMessage id="simple" />
31
- <br />
32
- <FormattedMessage id="placeholder" values={{name: 'John'}} />
33
- <br />
34
- <FormattedMessage id="date" values={{ts: Date.now()}} />
35
- <br />
36
- <FormattedMessage id="time" values={{ts: Date.now()}} />
37
- <br />
38
- <FormattedMessage id="number" values={{num: Math.random() * 1000}} />
39
- <br />
40
- <FormattedMessage id="plural" values={{num: 1}} />
41
- <br />
42
- <FormattedMessage id="plural" values={{num: 99}} />
43
- <br />
44
- <FormattedMessage id="select" values={{gender: 'male'}} />
45
- <br />
46
- <FormattedMessage id="select" values={{gender: 'female'}} />
47
- <br />
48
- <FormattedMessage id="selectordinal" values={{order: 1}} />
49
- <br />
50
- <FormattedMessage id="selectordinal" values={{order: 2}} />
51
- <br />
52
- <FormattedMessage id="selectordinal" values={{order: 3}} />
53
- <br />
54
- <FormattedMessage id="selectordinal" values={{order: 4}} />
55
- <br />
56
- <FormattedMessage
57
- id="richtext"
58
- values={{num: 99, bold: (chunks: any) => <strong>{chunks}</strong>}}
59
- />
60
- <br />
61
- <FormattedMessage
62
- id="richertext"
63
- values={{num: 99, bold: (chunks: any) => <strong>{chunks}</strong>}}
64
- />
65
- <br />
66
- <FormattedMessage id="unicode" values={{placeholder: 'world'}} />
67
- <br />
68
- <FormattedMessage
69
- id="whatever"
70
- defaultMessage={'Hello\u0020{placeholder}'}
71
- values={{placeholder: 'world'}}
72
- />
73
- </p>
74
- </IntlProvider>
75
- )
76
- }
77
-
78
- App.defaultProps = {
79
- currentTime: new Date(),
80
- }
81
-
82
- export default App
package/examples/StaticTypeSafetyAndCodeSplitting/StaticTypeSafetyAndCodeSplitting.tsx DELETED
@@ -1,44 +0,0 @@
1
- import * as React from 'react'
2
- import {
3
- useFormatMessage,
4
- IntlProvider,
5
- LocaleMessages,
6
- importMessages,
7
- } from './intlHelpers'
8
-
9
- const Component: React.FC = () => {
10
- const formatMessage = useFormatMessage()
11
- return (
12
- <>
13
- <h1>Static type safety + code splitting example</h1>
14
- <p>
15
- Have a look at DevTools &gt; Network: only "it.json" is loaded, not
16
- "en".
17
- </p>
18
- <p>
19
- Also have a look at the examples source code for helpers allowing to
20
- obtain static type safety
21
- </p>
22
- <p>
23
- Translated content:
24
- {formatMessage('foo') /* only valid keys can be passed here */}
25
- </p>
26
- </>
27
- )
28
- }
29
-
30
- const App: React.FC = props => {
31
- const locale = 'it'
32
- const [messages, setMessages] = React.useState<LocaleMessages | null>(null)
33
- React.useEffect(() => {
34
- importMessages(locale).then(setMessages)
35
- }, [])
36
-
37
- return messages ? (
38
- <IntlProvider locale={locale} messages={messages}>
39
- <Component {...props} />
40
- </IntlProvider>
41
- ) : null
42
- }
43
-
44
- export default App
package/examples/StaticTypeSafetyAndCodeSplitting/en.json DELETED
@@ -1,3 +0,0 @@
1
- {
2
- "foo": "bar"
3
- }
package/examples/StaticTypeSafetyAndCodeSplitting/intlHelpers.tsx DELETED
@@ -1,39 +0,0 @@
1
- import * as React from 'react'
2
- import {useIntl, IntlProvider as IntlProvider_} from 'react-intl'
3
- import type {PrimitiveType} from 'intl-messageformat'
4
-
5
- // "import type" ensures en messages aren't bundled by default
6
- import * as sourceOfTruth from './en.json'
7
- // Note: in order to use "import type" you'll need Babel >= 7.9.0 and/or TypeScript >= 3.8.
8
- // Otherwise, you can use a normal import and accept to always bundle one language + the user required one
9
-
10
- export type LocaleMessages = typeof sourceOfTruth
11
- export type LocaleKey = keyof LocaleMessages
12
-
13
- export function useFormatMessage(): (
14
- id: LocaleKey, // only accepts valid keys, not any string
15
- values?: Record<string, PrimitiveType>
16
- ) => string {
17
- const intl = useIntl()
18
- return (id, values) => intl.formatMessage({id}, values)
19
- }
20
-
21
- type SupportedLocales = 'en' | 'it'
22
-
23
- // return type on this signature enforces that all languages have the same translations defined
24
- export function importMessages(
25
- locale: SupportedLocales
26
- ): Promise<LocaleMessages> {
27
- switch (locale) {
28
- case 'en':
29
- return import('./en.json')
30
- case 'it':
31
- return import('./it.json')
32
- }
33
- }
34
-
35
- export const IntlProvider: React.FC<
36
- Omit<React.ComponentProps<typeof IntlProvider_>, 'messages'> & {
37
- messages: LocaleMessages
38
- }
39
- > = props => <IntlProvider_ {...props} />
package/examples/StaticTypeSafetyAndCodeSplitting/it.json DELETED
@@ -1,3 +0,0 @@
1
- {
2
- "foo": "baz"
3
- }
package/examples/TimeZone.tsx DELETED
@@ -1,44 +0,0 @@
1
- import * as React from 'react'
2
- import {
3
- FormattedDate,
4
- FormattedTime,
5
- IntlProvider,
6
- FormattedDateParts,
7
- } from 'react-intl'
8
-
9
- interface Props {
10
- currentTime?: Date | number
11
- }
12
-
13
- const App: React.FC<Props> = ({currentTime = Date.now()}) => {
14
- return (
15
- <IntlProvider locale="en" timeZone="Asia/Tokyo">
16
- <p>
17
- The date in Tokyo is: <FormattedDate value={currentTime} />
18
- <br />
19
- The time in Tokyo is: <FormattedTime value={currentTime} />
20
- <br />
21
- <FormattedDateParts
22
- value={new Date(1459832991883)}
23
- year="numeric"
24
- month="long"
25
- day="2-digit"
26
- >
27
- {(parts: Intl.DateTimeFormatPart[]) => (
28
- <>
29
- <b>{parts[0].value}</b>
30
- {parts[1].value}
31
- <small>{parts[2].value}</small>
32
- </>
33
- )}
34
- </FormattedDateParts>
35
- </p>
36
- </IntlProvider>
37
- )
38
- }
39
-
40
- App.defaultProps = {
41
- currentTime: new Date(),
42
- }
43
-
44
- export default App