use-intl 2.9.0 → 2.9.1

package/README.md

@@ -18,6 +18,8 @@ This library is based on the premise that messages can be grouped by namespaces
 
 ```jsx
 // LatestFollower.js
+import {useTranslations} from 'use-intl';
+
 function LatestFollower({user}) {
   const t = useTranslations('LatestFollower');
 
@@ -42,7 +44,7 @@ function LatestFollower({user}) {
 
 ## Installation
 
-1. Install `use-intl` in your project
+1. `npm install use-intl`
 2. Add the provider
 ```jsx
 import {IntlProvider} from 'use-intl';
@@ -51,20 +53,27 @@ import {IntlProvider} from 'use-intl';
 // fetch them from within a component and then render the provider 
 // along with your app once you have the messages.
 const messages = {
-  App: {
-    hello: 'Hello'
+  "App": {
+    "hello": 'Hello {username}!'
   }
 };
 
-ReactDOM.render(
-  <IntlProvider messages={messages} locale="en">
-    <App />
-  </IntlProvider>
-);
+function Root() {
+  return (
+    <IntlProvider messages={messages} locale="en">
+      <App user={{name: 'Jane'}} />
+    </IntlProvider>
+  );
+}
+
+function App({user}) {
+  const t = useTranslations('App');
+  return <h1>{t('hello', {username: user.name})}</h1>;
+}
 ```
-3. Based on the features you need and the browsers you support, you might have to provide [polyfills](https://formatjs.io/docs/polyfills).
-4. Use translations in your components!
+
+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.
 
 ## Usage
 
-Please refer to the [`next-intl` usage docs](https://next-intl-docs.vercel.app/docs/usage).
+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`.

package/dist/react/use-intl.esm3.js

@@ -1,8 +1,25 @@
+import { useMemo } from 'react';
+import createIntl from '../core/use-intl.esm3.js';
 import useIntlContext from './use-intl.esm8.js';
 
-function useLocale() {
-  return useIntlContext().locale;
+function useIntl() {
+  var _useIntlContext = useIntlContext(),
+      formats = _useIntlContext.formats,
+      locale = _useIntlContext.locale,
+      globalNow = _useIntlContext.now,
+      onError = _useIntlContext.onError,
+      timeZone = _useIntlContext.timeZone;
+
+  return useMemo(function () {
+    return createIntl({
+      formats: formats,
+      locale: locale,
+      now: globalNow,
+      onError: onError,
+      timeZone: timeZone
+    });
+  }, [formats, globalNow, locale, onError, timeZone]);
 }
 
-export { useLocale as default };
+export { useIntl as default };
 //# sourceMappingURL=use-intl.esm3.js.map

package/dist/react/use-intl.esm3.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-intl.esm3.js","sources":["../../src/react/useLocale.tsx"],"sourcesContent":["import useIntlContext from './useIntlContext';\n\nexport default function useLocale() {\n  return useIntlContext().locale;\n}\n"],"names":["useLocale","useIntlContext","locale"],"mappings":";;AAEc,SAAUA,SAAV,GAAmB;AAC/B,EAAOC,OAAAA,cAAc,GAAGC,MAAxB,CAAA;AACD;;;;"}
+{"version":3,"file":"use-intl.esm3.js","sources":["../../src/react/useIntl.tsx"],"sourcesContent":["import {useMemo} from 'react';\nimport createIntl from '../core/createIntl';\nimport useIntlContext from './useIntlContext';\n\nexport default function useIntl() {\n  const {formats, locale, now: globalNow, onError, timeZone} = useIntlContext();\n\n  return useMemo(\n    () =>\n      createIntl({\n        formats,\n        locale,\n        now: globalNow,\n        onError,\n        timeZone\n      }),\n    [formats, globalNow, locale, onError, timeZone]\n  );\n}\n"],"names":["useIntl","useIntlContext","formats","locale","globalNow","now","onError","timeZone","useMemo","createIntl"],"mappings":";;;;AAIc,SAAUA,OAAV,GAAiB;AAC7B,EAAA,IAAA,eAAA,GAA6DC,cAAc,EAA3E;AAAA,MAAOC,OAAP,mBAAOA,OAAP;AAAA,MAAgBC,MAAhB,mBAAgBA,MAAhB;AAAA,MAA6BC,SAA7B,mBAAwBC,GAAxB;AAAA,MAAwCC,OAAxC,mBAAwCA,OAAxC;AAAA,MAAiDC,QAAjD,mBAAiDA,QAAjD,CAAA;;AAEA,EAAA,OAAOC,OAAO,CACZ,YAAA;AAAA,IAAA,OACEC,UAAU,CAAC;AACTP,MAAAA,OAAO,EAAPA,OADS;AAETC,MAAAA,MAAM,EAANA,MAFS;AAGTE,MAAAA,GAAG,EAAED,SAHI;AAITE,MAAAA,OAAO,EAAPA,OAJS;AAKTC,MAAAA,QAAQ,EAARA,QAAAA;AALS,KAAD,CADZ,CAAA;AAAA,GADY,EASZ,CAACL,OAAD,EAAUE,SAAV,EAAqBD,MAArB,EAA6BG,OAA7B,EAAsCC,QAAtC,CATY,CAAd,CAAA;AAWD;;;;"}

package/dist/react/use-intl.esm4.js

@@ -1,25 +1,8 @@
-import { useMemo } from 'react';
-import createIntl from '../core/use-intl.esm3.js';
 import useIntlContext from './use-intl.esm8.js';
 
-function useIntl() {
-  var _useIntlContext = useIntlContext(),
-      formats = _useIntlContext.formats,
-      locale = _useIntlContext.locale,
-      globalNow = _useIntlContext.now,
-      onError = _useIntlContext.onError,
-      timeZone = _useIntlContext.timeZone;
-
-  return useMemo(function () {
-    return createIntl({
-      formats: formats,
-      locale: locale,
-      now: globalNow,
-      onError: onError,
-      timeZone: timeZone
-    });
-  }, [formats, globalNow, locale, onError, timeZone]);
+function useLocale() {
+  return useIntlContext().locale;
 }
 
-export { useIntl as default };
+export { useLocale as default };
 //# sourceMappingURL=use-intl.esm4.js.map

package/dist/react/use-intl.esm4.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-intl.esm4.js","sources":["../../src/react/useIntl.tsx"],"sourcesContent":["import {useMemo} from 'react';\nimport createIntl from '../core/createIntl';\nimport useIntlContext from './useIntlContext';\n\nexport default function useIntl() {\n  const {formats, locale, now: globalNow, onError, timeZone} = useIntlContext();\n\n  return useMemo(\n    () =>\n      createIntl({\n        formats,\n        locale,\n        now: globalNow,\n        onError,\n        timeZone\n      }),\n    [formats, globalNow, locale, onError, timeZone]\n  );\n}\n"],"names":["useIntl","useIntlContext","formats","locale","globalNow","now","onError","timeZone","useMemo","createIntl"],"mappings":";;;;AAIc,SAAUA,OAAV,GAAiB;AAC7B,EAAA,IAAA,eAAA,GAA6DC,cAAc,EAA3E;AAAA,MAAOC,OAAP,mBAAOA,OAAP;AAAA,MAAgBC,MAAhB,mBAAgBA,MAAhB;AAAA,MAA6BC,SAA7B,mBAAwBC,GAAxB;AAAA,MAAwCC,OAAxC,mBAAwCA,OAAxC;AAAA,MAAiDC,QAAjD,mBAAiDA,QAAjD,CAAA;;AAEA,EAAA,OAAOC,OAAO,CACZ,YAAA;AAAA,IAAA,OACEC,UAAU,CAAC;AACTP,MAAAA,OAAO,EAAPA,OADS;AAETC,MAAAA,MAAM,EAANA,MAFS;AAGTE,MAAAA,GAAG,EAAED,SAHI;AAITE,MAAAA,OAAO,EAAPA,OAJS;AAKTC,MAAAA,QAAQ,EAARA,QAAAA;AALS,KAAD,CADZ,CAAA;AAAA,GADY,EASZ,CAACL,OAAD,EAAUE,SAAV,EAAqBD,MAArB,EAA6BG,OAA7B,EAAsCC,QAAtC,CATY,CAAd,CAAA;AAWD;;;;"}
+{"version":3,"file":"use-intl.esm4.js","sources":["../../src/react/useLocale.tsx"],"sourcesContent":["import useIntlContext from './useIntlContext';\n\nexport default function useLocale() {\n  return useIntlContext().locale;\n}\n"],"names":["useLocale","useIntlContext","locale"],"mappings":";;AAEc,SAAUA,SAAV,GAAmB;AAC/B,EAAOC,OAAAA,cAAc,GAAGC,MAAxB,CAAA;AACD;;;;"}

package/dist/use-intl.esm.js

@@ -3,8 +3,8 @@ export { default as createTranslator } from './core/use-intl.esm2.js';
 export { default as createIntl } from './core/use-intl.esm3.js';
 export { default as IntlProvider } from './react/use-intl.esm.js';
 export { default as useTranslations } from './react/use-intl.esm2.js';
-export { default as useIntl } from './react/use-intl.esm4.js';
-export { default as useLocale } from './react/use-intl.esm3.js';
+export { default as useIntl } from './react/use-intl.esm3.js';
+export { default as useLocale } from './react/use-intl.esm4.js';
 export { default as useNow } from './react/use-intl.esm5.js';
 export { default as useTimeZone } from './react/use-intl.esm6.js';
 //# sourceMappingURL=use-intl.esm.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-intl",
-  "version": "2.9.0",
+  "version": "2.9.1",
   "sideEffects": false,
   "author": "Jan Amann <jan@amann.me>",
   "description": "Minimal, but complete solution for managing internationalization in React apps.",
@@ -60,5 +60,5 @@
   "engines": {
     "node": ">=10"
   },
-  "gitHead": "dfb314c95bcf3a6ad126f6f6db52ce2530adc193"
+  "gitHead": "ef170366c1b0689d969b17e70f9e70a296e86254"
 }