use-next-intl-format

Super lightweight React Hook for creating memoized native instances of Intl for Next.js i18n


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 — via useIntlDateTimeFormat
* RelativeTimeFormat — via useIntlRelativeTimeFormat
* NumberFormat — via useIntlNumberFormat
* PluralRules — via useIntlPluralRules
* DisplayNames — via useIntlDisplayNames
* ListFormat — via useIntlListFormat
* 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 (



)
}
``

License

MIT © lopezjurip

---

This hook is created using create-react-hook.