NumberFormat.tsx

import Intl from "intl";
import React, { useMemo } from "react";

import useLocalization from "./useLocalization";

export interface NumberFormatProps {
  /** The value to format */
  value: number;
  /** Override system locale (not recommended) */
  locale?: string;
  localeMatcher?: "lookup" | "best fit";
  numberStyle?: "decimal" | "currency" | "percent" | "unit";
  numberingSystem?:
    | "arab"
    | "arabext"
    | "bali"
    | "beng"
    | "deva"
    | "fullwide"
    | "gujr"
    | "guru"
    | "hanidec"
    | "khmr"
    | "knda"
    | "laoo"
    | "latn"
    | "limb"
    | "mlym"
    | "mong"
    | "mymr"
    | "orya"
    | "tamldec"
    | "telu"
    | "thai"
    | "tibt";
  unit?: string;
  unitDisplay?: "long" | "short" | "narrow";
  currency?: string;
  currencyDisplay?: "symbol" | "code" | "name";
  useGrouping?: boolean;
  minimumIntegerDigits?: number;
  minimumFractionDigits?: number;
  maximumFractionDigits?: number;
  minimumSignificantDigits?: number;
  maximumSignificantDigits?: number;
  notation?: "standard" | "scientific" | "engineering" | "compact";
  compactDisplay?: "short" | "long";
}

/**
 * @see [NumberFormat Documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat)
 */
export default function NumberFormat({ value, locale: customLocale, numberStyle, ...props }: NumberFormatProps) {
  const { locale: defaultLocale } = useLocalization();
  const locale = customLocale ?? defaultLocale;
  const intl = useMemo(() => new Intl.NumberFormat(locale, { style: numberStyle, ...props }), [
    numberStyle,
    props,
    locale,
  ]);
  return <>{intl.format(value)}</>;
}