@sinchsmb/ui-kit/src/core/hooks/useFormattedNumber/useFormattedNumber.ts

UI kit for SinchSMB frontend

import { useMemo } from 'react';

import { useLocale } from '../useLocale';

/**
 * Options for {@link useFormattedNumber} function
 */
export interface UseFormattedNumberOptions {
  /**
   * The maximum number of fraction digits to use.
   *
   * Possible values are from 0 to 20.
   */
  maximumFractionDigits?: number | undefined;
}

type FormattedNumber = (number: number) => string;

/**
 * Returns the function for number formatting
 *
 * Inside it uses a {@link Intl.NumberFormat} instance configured according to current locale.
 * So it expects subset of {@link Intl.NumberFormatOptions}
 *
 * More about {@link Intl.NumberFormat} configuration [here]{@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat}
 *
 * @example
 * const formatNumber = useFormattedNumber();
 * formatNumber(1234567890); // 1,234,567,890
 * @example
 * const formatNumber = useFormattedNumber({ maximumFractionDigits: 2 });
 * formatNumber(12.999); // 13
 * @example
 * const formatNumber = useFormattedNumber({ maximumFractionDigits: 2 });
 * formatNumber(12.991); // 12.99
 */
export function useFormattedNumber({
  maximumFractionDigits,
}: UseFormattedNumberOptions = {}): FormattedNumber {
  const locale = useLocale();

  return useMemo<FormattedNumber>(() => {
    const formatter = new Intl.NumberFormat(locale, { maximumFractionDigits });

    return (number) => {
      return formatter.format(number);
    };
  }, [locale, maximumFractionDigits]);
}