use-intl 2.21.0 → 2.22.1

package/README.md

@@ -8,7 +8,7 @@
 
 Internationalization is an essential part of the user experience. use-intl gives you everything you need to get language subtleties right and has always got your back whenever you need to fine-tune a translation.
 
-- 🌟 **ICU message syntax**: Localize your messages with interpolation, plurals, ordinal pluralization, enum-based label selection and rich text.
+- 🌟 **ICU message syntax**: Localize your messages with interpolation, cardinal & ordinal plurals, enum-based label selection and rich text.
 - 📅 **Dates, times & numbers**: Apply appropriate formatting without worrying about server/client differences like time zones.
 - ✅ **Type-safe**: Speed up development with autocompletion for message keys and catch typos early with compile-time checks.
 - 💡 **Hooks-only API**: Learn a single API that can be used across your code base to turn translations into plain strings or rich text.
@@ -19,36 +19,33 @@ Internationalization is an essential part of the user experience. use-intl gives
 This library is based on the premise that messages can be grouped by namespaces (typically a component name).
 
 ```jsx
-// UserDetails.tsx
-import {useTranslations, useFormatter} from 'next-intl';
+// UserProfile.tsx
+import {useTranslations} from 'next-intl';
  
-function UserDetails({user}) {
-  const t = useTranslations('UserDetails');
-  const format = useFormatter();
+export default function UserProfile({user}) {
+  const t = useTranslations('UserProfile');
  
   return (
     <section>
-      <h2>{t('title')}</h2>
-      <p>{t('followers', {count: user.followers.length})}</p>
-      <p>{t('lastSeen', {time: format.relativeTime(user.lastSeen)})</p>
-      <Image alt={t('portrait', {username: user.name})} src={user.portrait} />
+      <h1>{t('title', {firstName: user.firstName})}</h1>
+      <p>{t('membership', {memberSince: user.memberSince})}</p>
+      <p>{t('followers', {count: user.numFollowers})}</p>
     </section>
   );
 }
 ```
 
-```js
+```json
 // en.json
 {
-  "UserDetails": {
-    "title": "User details",
+  "UserProfile": {
+    "title": "{username}'s profile",
+    "membership": "Member since {memberSince, date, short}",
     "followers": "{count, plural, ↵
                     =0 {No followers yet} ↵
                     =1 {One follower} ↵
                     other {# followers} ↵
-                  }",
-    "lastSeen": "Last seen {time}",
-    "portrait": "Portrait of {username}"
+                  }"
   }
 }
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-intl",
-  "version": "2.21.0",
+  "version": "2.22.1",
   "sideEffects": false,
   "author": "Jan Amann <jan@amann.work>",
   "description": "Minimal, but complete solution for managing internationalization in React apps.",
@@ -72,5 +72,5 @@
   "engines": {
     "node": ">=10"
   },
-  "gitHead": "0b5e0fe7b16505fa02ea3b472a5b87e91c75a7a1"
+  "gitHead": "b1688dea14c9367972568239160e7f2403bfb4ab"
 }