use-intl 2.8.0 → 2.9.1
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.
package/README.md
CHANGED
|
@@ -18,6 +18,8 @@ This library is based on the premise that messages can be grouped by namespaces
|
|
|
18
18
|
|
|
19
19
|
```jsx
|
|
20
20
|
// LatestFollower.js
|
|
21
|
+
import {useTranslations} from 'use-intl';
|
|
22
|
+
|
|
21
23
|
function LatestFollower({user}) {
|
|
22
24
|
const t = useTranslations('LatestFollower');
|
|
23
25
|
|
|
@@ -42,7 +44,7 @@ function LatestFollower({user}) {
|
|
|
42
44
|
|
|
43
45
|
## Installation
|
|
44
46
|
|
|
45
|
-
1.
|
|
47
|
+
1. `npm install use-intl`
|
|
46
48
|
2. Add the provider
|
|
47
49
|
```jsx
|
|
48
50
|
import {IntlProvider} from 'use-intl';
|
|
@@ -51,20 +53,27 @@ import {IntlProvider} from 'use-intl';
|
|
|
51
53
|
// fetch them from within a component and then render the provider
|
|
52
54
|
// along with your app once you have the messages.
|
|
53
55
|
const messages = {
|
|
54
|
-
App: {
|
|
55
|
-
hello: 'Hello'
|
|
56
|
+
"App": {
|
|
57
|
+
"hello": 'Hello {username}!'
|
|
56
58
|
}
|
|
57
59
|
};
|
|
58
60
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
<
|
|
62
|
-
|
|
63
|
-
|
|
61
|
+
function Root() {
|
|
62
|
+
return (
|
|
63
|
+
<IntlProvider messages={messages} locale="en">
|
|
64
|
+
<App user={{name: 'Jane'}} />
|
|
65
|
+
</IntlProvider>
|
|
66
|
+
);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
function App({user}) {
|
|
70
|
+
const t = useTranslations('App');
|
|
71
|
+
return <h1>{t('hello', {username: user.name})}</h1>;
|
|
72
|
+
}
|
|
64
73
|
```
|
|
65
|
-
|
|
66
|
-
|
|
74
|
+
|
|
75
|
+
Have a look at [the minimal setup example](https://codesandbox.io/s/use-intl-cra-example-13w917?file=/src/Root.tsx) to explore a working app.
|
|
67
76
|
|
|
68
77
|
## Usage
|
|
69
78
|
|
|
70
|
-
Please refer to the [`next-intl` usage docs](https://next-intl-docs.vercel.app/docs/usage)
|
|
79
|
+
Please refer to the [`next-intl` usage docs](https://next-intl-docs.vercel.app/docs/usage) for more advanced usage, but note that you should import from `use-intl` instead of `next-intl`.
|
|
@@ -1,8 +1,50 @@
|
|
|
1
|
+
import { useState, useEffect } from 'react';
|
|
1
2
|
import useIntlContext from './use-intl.esm8.js';
|
|
2
3
|
|
|
3
|
-
function
|
|
4
|
-
return
|
|
4
|
+
function getNow() {
|
|
5
|
+
return new Date();
|
|
5
6
|
}
|
|
7
|
+
/**
|
|
8
|
+
* Reading the current date via `new Date()` in components should be avoided, as
|
|
9
|
+
* it causes components to be impure and can lead to flaky tests. Instead, this
|
|
10
|
+
* hook can be used.
|
|
11
|
+
*
|
|
12
|
+
* By default, it returns the time when the component mounts. If `updateInterval`
|
|
13
|
+
* is specified, the value will be updated based on the interval.
|
|
14
|
+
*
|
|
15
|
+
* You can however also return a static value from this hook, if you
|
|
16
|
+
* configure the `now` parameter on the context provider. Note however,
|
|
17
|
+
* that if `updateInterval` is configured in this case, the component
|
|
18
|
+
* will initialize with the global value, but will afterwards update
|
|
19
|
+
* continuously based on the interval.
|
|
20
|
+
*
|
|
21
|
+
* For unit tests, this can be mocked to a constant value. For end-to-end
|
|
22
|
+
* testing, an environment parameter can be passed to the `now` parameter
|
|
23
|
+
* of the provider to mock this to a static value.
|
|
24
|
+
*/
|
|
6
25
|
|
|
7
|
-
|
|
26
|
+
|
|
27
|
+
function useNow(options) {
|
|
28
|
+
var updateInterval = options == null ? void 0 : options.updateInterval;
|
|
29
|
+
|
|
30
|
+
var _useIntlContext = useIntlContext(),
|
|
31
|
+
globalNow = _useIntlContext.now;
|
|
32
|
+
|
|
33
|
+
var _useState = useState(globalNow || getNow()),
|
|
34
|
+
now = _useState[0],
|
|
35
|
+
setNow = _useState[1];
|
|
36
|
+
|
|
37
|
+
useEffect(function () {
|
|
38
|
+
if (!updateInterval) return;
|
|
39
|
+
var intervalId = setInterval(function () {
|
|
40
|
+
setNow(getNow());
|
|
41
|
+
}, updateInterval);
|
|
42
|
+
return function () {
|
|
43
|
+
clearInterval(intervalId);
|
|
44
|
+
};
|
|
45
|
+
}, [globalNow, updateInterval]);
|
|
46
|
+
return now;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
export { useNow as default };
|
|
8
50
|
//# sourceMappingURL=use-intl.esm5.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-intl.esm5.js","sources":["../../src/react/
|
|
1
|
+
{"version":3,"file":"use-intl.esm5.js","sources":["../../src/react/useNow.tsx"],"sourcesContent":["import {useState, useEffect} from 'react';\nimport useIntlContext from './useIntlContext';\n\ntype Options = {\n updateInterval?: number;\n};\n\nfunction getNow() {\n return new Date();\n}\n\n/**\n * Reading the current date via `new Date()` in components should be avoided, as\n * it causes components to be impure and can lead to flaky tests. Instead, this\n * hook can be used.\n *\n * By default, it returns the time when the component mounts. If `updateInterval`\n * is specified, the value will be updated based on the interval.\n *\n * You can however also return a static value from this hook, if you\n * configure the `now` parameter on the context provider. Note however,\n * that if `updateInterval` is configured in this case, the component\n * will initialize with the global value, but will afterwards update\n * continuously based on the interval.\n *\n * For unit tests, this can be mocked to a constant value. For end-to-end\n * testing, an environment parameter can be passed to the `now` parameter\n * of the provider to mock this to a static value.\n */\nexport default function useNow(options?: Options) {\n const updateInterval = options?.updateInterval;\n\n const {now: globalNow} = useIntlContext();\n const [now, setNow] = useState(globalNow || getNow());\n\n useEffect(() => {\n if (!updateInterval) return;\n\n const intervalId = setInterval(() => {\n setNow(getNow());\n }, updateInterval);\n\n return () => {\n clearInterval(intervalId);\n };\n }, [globalNow, updateInterval]);\n\n return now;\n}\n"],"names":["getNow","Date","useNow","options","updateInterval","useIntlContext","globalNow","now","useState","setNow","useEffect","intervalId","setInterval","clearInterval"],"mappings":";;;AAOA,SAASA,MAAT,GAAe;AACb,EAAO,OAAA,IAAIC,IAAJ,EAAP,CAAA;AACD,CAAA;AAED;;;;;;;;;;;;;;;;;AAiBG;;;AACqB,SAAAC,MAAA,CAAOC,OAAP,EAAwB;AAC9C,EAAA,IAAMC,cAAc,GAAGD,OAAH,IAAGA,IAAAA,GAAAA,KAAAA,CAAAA,GAAAA,OAAO,CAAEC,cAAhC,CAAA;;AAEA,EAAA,IAAA,eAAA,GAAyBC,cAAc,EAAvC;AAAA,MAAYC,SAAZ,mBAAOC,GAAP,CAAA;;AACA,EAAA,IAAA,SAAA,GAAsBC,QAAQ,CAACF,SAAS,IAAIN,MAAM,EAApB,CAA9B;AAAA,MAAOO,GAAP,GAAA,SAAA,CAAA,CAAA,CAAA;AAAA,MAAYE,MAAZ,GAAA,SAAA,CAAA,CAAA,CAAA,CAAA;;AAEAC,EAAAA,SAAS,CAAC,YAAK;AACb,IAAI,IAAA,CAACN,cAAL,EAAqB,OAAA;AAErB,IAAA,IAAMO,UAAU,GAAGC,WAAW,CAAC,YAAK;AAClCH,MAAAA,MAAM,CAACT,MAAM,EAAP,CAAN,CAAA;AACD,KAF6B,EAE3BI,cAF2B,CAA9B,CAAA;AAIA,IAAA,OAAO,YAAK;AACVS,MAAAA,aAAa,CAACF,UAAD,CAAb,CAAA;AACD,KAFD,CAAA;AAGD,GAVQ,EAUN,CAACL,SAAD,EAAYF,cAAZ,CAVM,CAAT,CAAA;AAYA,EAAA,OAAOG,GAAP,CAAA;AACD;;;;"}
|
|
@@ -1,50 +1,8 @@
|
|
|
1
|
-
import { useState, useEffect } from 'react';
|
|
2
1
|
import useIntlContext from './use-intl.esm8.js';
|
|
3
2
|
|
|
4
|
-
function
|
|
5
|
-
return
|
|
3
|
+
function useTimeZone() {
|
|
4
|
+
return useIntlContext().timeZone;
|
|
6
5
|
}
|
|
7
|
-
/**
|
|
8
|
-
* Reading the current date via `new Date()` in components should be avoided, as
|
|
9
|
-
* it causes components to be impure and can lead to flaky tests. Instead, this
|
|
10
|
-
* hook can be used.
|
|
11
|
-
*
|
|
12
|
-
* By default, it returns the time when the component mounts. If `updateInterval`
|
|
13
|
-
* is specified, the value will be updated based on the interval.
|
|
14
|
-
*
|
|
15
|
-
* You can however also return a static value from this hook, if you
|
|
16
|
-
* configure the `now` parameter on the context provider. Note however,
|
|
17
|
-
* that if `updateInterval` is configured in this case, the component
|
|
18
|
-
* will initialize with the global value, but will afterwards update
|
|
19
|
-
* continuously based on the interval.
|
|
20
|
-
*
|
|
21
|
-
* For unit tests, this can be mocked to a constant value. For end-to-end
|
|
22
|
-
* testing, an environment parameter can be passed to the `now` parameter
|
|
23
|
-
* of the provider to mock this to a static value.
|
|
24
|
-
*/
|
|
25
6
|
|
|
26
|
-
|
|
27
|
-
function useNow(options) {
|
|
28
|
-
var updateInterval = options == null ? void 0 : options.updateInterval;
|
|
29
|
-
|
|
30
|
-
var _useIntlContext = useIntlContext(),
|
|
31
|
-
globalNow = _useIntlContext.now;
|
|
32
|
-
|
|
33
|
-
var _useState = useState(globalNow || getNow()),
|
|
34
|
-
now = _useState[0],
|
|
35
|
-
setNow = _useState[1];
|
|
36
|
-
|
|
37
|
-
useEffect(function () {
|
|
38
|
-
if (!updateInterval) return;
|
|
39
|
-
var intervalId = setInterval(function () {
|
|
40
|
-
setNow(getNow());
|
|
41
|
-
}, updateInterval);
|
|
42
|
-
return function () {
|
|
43
|
-
clearInterval(intervalId);
|
|
44
|
-
};
|
|
45
|
-
}, [globalNow, updateInterval]);
|
|
46
|
-
return now;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
export { useNow as default };
|
|
7
|
+
export { useTimeZone as default };
|
|
50
8
|
//# sourceMappingURL=use-intl.esm6.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-intl.esm6.js","sources":["../../src/react/
|
|
1
|
+
{"version":3,"file":"use-intl.esm6.js","sources":["../../src/react/useTimeZone.tsx"],"sourcesContent":["import useIntlContext from './useIntlContext';\n\nexport default function useTimeZone() {\n return useIntlContext().timeZone;\n}\n"],"names":["useTimeZone","useIntlContext","timeZone"],"mappings":";;AAEc,SAAUA,WAAV,GAAqB;AACjC,EAAOC,OAAAA,cAAc,GAAGC,QAAxB,CAAA;AACD;;;;"}
|
package/dist/use-intl.esm.js
CHANGED
|
@@ -5,6 +5,6 @@ export { default as IntlProvider } from './react/use-intl.esm.js';
|
|
|
5
5
|
export { default as useTranslations } from './react/use-intl.esm2.js';
|
|
6
6
|
export { default as useIntl } from './react/use-intl.esm3.js';
|
|
7
7
|
export { default as useLocale } from './react/use-intl.esm4.js';
|
|
8
|
-
export { default as useNow } from './react/use-intl.
|
|
9
|
-
export { default as useTimeZone } from './react/use-intl.
|
|
8
|
+
export { default as useNow } from './react/use-intl.esm5.js';
|
|
9
|
+
export { default as useTimeZone } from './react/use-intl.esm6.js';
|
|
10
10
|
//# sourceMappingURL=use-intl.esm.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "use-intl",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.9.1",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"author": "Jan Amann <jan@amann.me>",
|
|
6
6
|
"description": "Minimal, but complete solution for managing internationalization in React apps.",
|
|
@@ -47,18 +47,18 @@
|
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
49
|
"@testing-library/react": "^13.0.0",
|
|
50
|
-
"@types/react": "^18.0.
|
|
50
|
+
"@types/react": "^18.0.23",
|
|
51
51
|
"date-fns": "^2.16.1",
|
|
52
52
|
"dts-cli": "1.4.0",
|
|
53
53
|
"eslint": "8.12.0",
|
|
54
54
|
"eslint-config-molindo": "6.0.0",
|
|
55
|
-
"react": "^18.
|
|
56
|
-
"react-dom": "^18.
|
|
55
|
+
"react": "^18.2.0",
|
|
56
|
+
"react-dom": "^18.2.0",
|
|
57
57
|
"tslib": "^2.3.1",
|
|
58
58
|
"typescript": "^4.4.4"
|
|
59
59
|
},
|
|
60
60
|
"engines": {
|
|
61
61
|
"node": ">=10"
|
|
62
62
|
},
|
|
63
|
-
"gitHead": "
|
|
63
|
+
"gitHead": "ef170366c1b0689d969b17e70f9e70a296e86254"
|
|
64
64
|
}
|