Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
use-intl - npm Package Compare versions
Comparing version 1.3.2 to 1.3.3
@@ -0,3 +1,19 @@ | ||
| # Change Log | ||
| All notable changes to this project will be documented in this file. | ||
| See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. | ||
| ## [1.3.3](https://github.com/amannn/next-intl/tree/main/packages/use-intl/compare/v1.3.2...v1.3.3) (2021-02-09) | ||
| ### Bug Fixes | ||
| * Update DateTimeFormatOptions ([#29](https://github.com/amannn/next-intl/tree/main/packages/use-intl/issues/29)) ([91a8f52](https://github.com/amannn/next-intl/tree/main/packages/use-intl/commit/91a8f5216a9ef2a0e76be6e3e8bd706f5c7496a3)) | ||
| # Changelog | ||
| See [next-intl changelog](https://github.com/amannn/next-intl/blob/main/CHANGELOG.md). |
@@ -0,1 +1,4 @@ | ||
| /** | ||
| * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat | ||
| */ | ||
| declare type DateTimeFormatOptions = Intl.DateTimeFormatOptions & { | ||
@@ -62,3 +65,9 @@ /** | ||
| formatMatcher?: 'best fit' | 'basic'; | ||
| dateStyle?: 'full' | 'long' | 'medium' | 'short'; | ||
| timeStyle?: 'full' | 'long' | 'medium' | 'short'; | ||
| calendar?: 'buddhist' | 'chinese' | 'coptic' | 'ethiopia' | 'ethiopic' | 'gregory' | 'hebrew' | 'indian' | 'islamic' | 'iso8601' | 'japanese' | 'persian' | 'roc'; | ||
| dayPeriod?: 'narrow' | 'short' | 'long'; | ||
| numberingSystem?: 'arab' | 'arabext' | 'bali' | 'beng' | 'deva' | 'fullwide' | 'gujr' | 'guru' | 'hanidec' | 'khmr' | 'knda' | 'laoo' | 'latn' | 'limb' | 'mlym' | 'mong' | 'mymr' | 'orya' | 'tamldec' | 'telu' | 'thai' | 'tibt'; | ||
| hourCycle?: 'h11' | 'h12' | 'h23' | 'h24'; | ||
| }; | ||
| export default DateTimeFormatOptions; |
| { | ||
| "name": "use-intl", | ||
| "version": "1.3.2", | ||
| "version": "1.3.3", | ||
| "sideEffects": false, | ||
@@ -48,3 +48,3 @@ "author": "Jan Amann <jan@amann.me>", | ||
| }, | ||
| "gitHead": "b5151ddcdc615a364d48acc1a0e70fe4678ab042" | ||
| "gitHead": "199e2f4f967b0dba7ef51c7d0745afac03d53837" | ||
| } |
@@ -5,9 +5,10 @@ # use-intl 🌐 | ||
| Minimal, but complete solution for managing internationalization in React apps. | ||
| > A minimal, but complete solution for managing translations, date, time and number formatting in React apps. | ||
| ## Features | ||
| - 🌟 I18n is an essential part of the user experience, therefore this library doesn't compromise on flexibility and never leaves you behind when you need to fine tune a translation. Messages use the proven [ICU syntax](https://formatjs.io/docs/core-concepts/icu-syntax) which covers interpolation, numbers, dates, times, plurals, ordinal pluralization, label selection based on enums and rich text. | ||
| - ⚔️ Based on battle-tested building blocks from [Format.JS](https://formatjs.io/) (used by `react-intl`), this library is a thin wrapper around high-quality, lower-level APIs for i18n. | ||
| - 💡 A hooks-only API ensures that you can use the same API for `children` as well as for attributes which expect strings. | ||
| - 🌟 I18n is an essential part of the user experience, therefore this library doesn't compromise on flexibility and never leaves you behind when you need to fine tune a translation. Messages use the **proven [ICU syntax](https://formatjs.io/docs/core-concepts/icu-syntax)** which covers interpolation, numbers, dates, times, plurals, ordinal pluralization, label selection based on enums and rich text. | ||
| - 📅 Built-in **date, time and number formatting** provides all the necessary parts you need for localisation. You can use global formats for a consistent look & feel of your app and integrate them with translations. | ||
| - 💡 A **hooks-only API** ensures that you can use the same API for `children` as well as for attributes which expect strings. | ||
| - ⚔️ Based on **battle-tested** building blocks from [Format.JS](https://formatjs.io/) (used by `react-intl`), this library is a thin wrapper around high-quality, lower-level APIs for i18n. | ||
@@ -18,9 +19,28 @@ ## What does it look like? | ||
| ```js | ||
| // en.json | ||
| { | ||
| "LatestFollower": { | ||
| "latestFollower": "<user>{username}</user> started following you {followDateRelative} ({followDate, date, short})", | ||
| "followBack": "Follow back" | ||
| } | ||
| } | ||
| ``` | ||
| ```jsx | ||
| function LatestFollower({user}) { | ||
| // LatestFollower.js | ||
| function LatestFollower({event}) { | ||
| const t = useTranslations('LatestFollower'); | ||
| const intl = useIntl(); | ||
| return ( | ||
| <> | ||
| <Text>{t('latestFollower', {username: user.name})}</Text> | ||
| <Text> | ||
| {t('latestFollower', { | ||
| user: children => <b>{children}</b>, | ||
| username: event.user.name, | ||
| followDateRelative: intl.formatRelativeTime(event.followDate), | ||
| followDate: event.followDate | ||
| })} | ||
| </Text> | ||
| <IconButton aria-label={t('followBack')} icon={<FollowIcon />} /> | ||
@@ -32,10 +52,6 @@ </> | ||
| ```js | ||
| // en.json | ||
| { | ||
| "LatestFollower": { | ||
| "latestFollower": "{username} started following you", | ||
| "followBack": "Follow back" | ||
| } | ||
| } | ||
| ```jsx | ||
| // Output | ||
| <p><b>Jane</b> started following you two weeks ago (Feb 4, 2021)</p> | ||
| <button aria-label="Follow back"><svg ... /></button> | ||
| ``` | ||
@@ -42,0 +58,0 @@ |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.8%
159605
- Lines of code
- increased by2.96%
1843
- Number of lines in readme file
- increased by23.53%
84
No dependency changes