useNumberFormatter

훅

@hua-labs/i18n-formatters

숫자 포맷팅 기능을 제공하는 훅입니다. 로케일에 맞는 천단위 구분자, 퍼센트, 축약 표기를 지원합니다.

설치

Terminalbash

npm install @hua-labs/i18n-formatters

Importtsx

import { useNumberFormatter } from '@hua-labs/i18n-formatters';

기본 사용법

tsx

import { useNumberFormatter } from '@hua-labs/i18n-formatters';

function Stats() {
  const { formatNumber, formatPercent, formatCompact } = useNumberFormatter();

  return (
    <div>
      <p>Users: {formatNumber(1234567)}</p>
      {/* ko: 1,234,567 | en: 1,234,567 */}

      <p>Success rate: {formatPercent(0.956)}</p>
      {/* ko: 95.6% | en: 95.6% */}

      <p>Views: {formatCompact(1500000)}</p>
      {/* ko: 150만 | en: 1.5M */}
    </div>
  );
}

라이브 데모

formatNumber()

formatNumber(1234567)

1,234,567

formatNumber(9876.54)

9,876.54

formatNumber(1500000)

1,500,000

formatPercent()

formatPercent(0.956)

95.6%

formatPercent(0.1234)

12.3%

formatPercent(1.5)

150%

formatCompact()

formatCompact(1,500)

1.5천

formatCompact(15,000)

1.5만

formatCompact(150,000)

15만

formatCompact(1,500,000)

150만

formatCompact(15,000,000)

1,500만

API 레퍼런스

반환값


formatNumber	(value: number, options?: NumberFormatterOptions) => string	Format number with locale-specific separators
formatPercent	(value: number, options?: PercentFormatterOptions) => string	Format number as percentage
formatCompact	(value: number, options?: NumberFormatterOptions) => string	Format large numbers compactly (e.g., 1.2M, 3.4K)
currentLanguage	string	Current active language code

코드 예시

i18n:examples.customOptions

tsx

import { useNumberFormatter } from '@hua-labs/i18n-formatters';

function PriceDisplay() {
  const { formatNumber, formatPercent } = useNumberFormatter();

  return (
    <div>
      {/* 소수점 자릿수 지정 */}
      <p>{formatNumber(1234.5678, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</p>
      {/* Output: 1,234.57 */}

      {/* 퍼센트 소수점 자릿수 */}
      <p>{formatPercent(0.1234, { minimumFractionDigits: 1, maximumFractionDigits: 1 })}</p>
      {/* Output: 12.3% */}
    </div>
  );
}

사용 사례

통계 대시보드

숫자 지표를 로케일에 맞게 표시

이커머스 지표

판매량, 전환율 등 수치 표시

분석 차트

차트 레이블에 축약 숫자 표시

재무 보고서

정밀한 소수점 숫자 표시

useDateFormatter useCurrencyFormatter