Super lightweight React Hook for creating memoized native instances of Intl for Next.js i18n
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, { ... }) // ... }
This module includes Typescript typings.
npm install --save use-next-intl-format yarn add use-next-intl-format
DateTimeFormat— viauseIntlDateTimeFormatRelativeTimeFormat— viauseIntlRelativeTimeFormatNumberFormat— viauseIntlNumberFormatPluralRules— viauseIntlPluralRulesDisplayNames— viauseIntlDisplayNamesListFormat— viauseIntlListFormatSegmenter— viauseIntlSegmenter
See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options for
optionsreference
See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat#using_options for
optionsreference
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> ) }
MIT © lopezjurip
This hook is created using create-react-hook.