Use-next-intl-format NPM

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:

import { useRouter } from "next/router";

function Page() {
  const router = useRouter()
  const formatter = new Intl.DateTimeFormat(router.locale, { ... })
  // ...
}

Install

This module includes Typescript typings.

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.

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 (
    <div>
      Current datetime: {dateFormatter.format(new Date())}
      Number: {numberFormatter.format(2)}
    </div>
  )
}