https://github.com/useflyyer/use-next-intl-format
Super lightweight and zero-dependencies React Hook for creating memoized native instances of Intl for Next.js i18n
https://github.com/useflyyer/use-next-intl-format
flyyer i18n intl nextjs react react-hook typescript
Last synced: 10 months ago
JSON representation
Super lightweight and zero-dependencies React Hook for creating memoized native instances of Intl for Next.js i18n
- Host: GitHub
- URL: https://github.com/useflyyer/use-next-intl-format
- Owner: useflyyer
- Created: 2021-02-20T15:04:58.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-15T04:32:09.000Z (over 3 years ago)
- Last Synced: 2025-08-18T20:45:06.668Z (10 months ago)
- Topics: flyyer, i18n, intl, nextjs, react, react-hook, typescript
- Language: TypeScript
- Homepage: https://flyyer.io
- Size: 1.89 MB
- Stars: 4
- Watchers: 3
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# use-next-intl-format
[Super lightweight](https://bundlephobia.com/result?p=use-next-intl-format) React Hook for creating memoized native instances of Intl for Next.js i18n
[](https://www.npmjs.com/package/use-next-intl-format)
## Note
Do you need this library? **Probably not**, use it only if you need to have the same `formatter` per render for optimization reasons.
If that is not your case, fallback to:
```tsx
import { useRouter } from "next/router";
function Page() {
const router = useRouter()
const formatter = new Intl.DateTimeFormat(router.locale, { ... })
// ...
}
```
## Install
This module includes Typescript typings.
```bash
npm install --save use-next-intl-format
yarn add use-next-intl-format
```
## Supported Intl helpers
* [`DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) — via `useIntlDateTimeFormat`
* [`RelativeTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat) — via `useIntlRelativeTimeFormat`
* [`NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) — via `useIntlNumberFormat`
* [`PluralRules`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules) — via `useIntlPluralRules`
* [`DisplayNames`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames) — via `useIntlDisplayNames`
* [`ListFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat) — via `useIntlListFormat`
* [`Segmenter`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter/Segmenter) — via `useIntlSegmenter`
## Usage
> See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options for `options` reference
> See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat#using_options for `options` reference
**This only applies for Next.js apps.**
```tsx
import * as React from 'react'
import { useIntlDateTimeFormat, useIntlNumberFormat } from 'use-next-intl-format'
// Prefer stable values.
const DATE_OPTIONS: Intl.DateTimeFormatOptions = {
year: "numeric",
month: "long",
day: "numeric",
};
const Example = () => {
const dateFormatter = useIntlDateTimeFormat(DATE_OPTIONS);
const [numberFormatterOptions] = useState({ notation: "compact" });
const numberFormatter = useIntlNumberFormat(numberFormatterOptions)
return (
Current datetime: {dateFormatter.format(new Date())}
Number: {numberFormatter.format(2)}
)
}
```
## License
MIT © [lopezjurip](https://github.com/lopezjurip)
---
This hook is created using [create-react-hook](https://github.com/hermanya/create-react-hook).