NumberFormatter

NumberFormatter

천 단위/소수 구분 기호와 접두사/접미사를 사용해 숫자를 형식화하는 컴포넌트예요. NumberFormatter는 NumberInput 컴포넌트와 동일한 형식 관련 prop을 지원해요.

출처: 문서

본문

사용법 (Usage)

NumberFormatter를 사용해 숫자를 형식화해요. NumberInput 컴포넌트와 동일한 형식 관련 prop을 지원해요.

import { NumberFormatter } from '@mantine/core';

function Demo() {
  return <NumberFormatter value={1000000} thousandSeparator />;
}

접두사와 접미사 (Prefix and suffix)

prefix와 suffix prop을 설정하면 값의 시작이나 끝에 지정한 문자열을 추가해요.

import { NumberFormatter } from '@mantine/core';

function Demo() {
  return (
    <>
      <NumberFormatter prefix="$ " value={100} />
      <NumberFormatter suffix=" RUB" value={100} />
    </>
  );
}

천 단위 구분 기호 (Thousands separator)

thousandSeparator prop을 설정하면 천 단위를 문자로 구분해요. thousandsGroupStyle으로 그룹핑 로직을 제어할 수 있는데, thousand, lakh, wan, none 값을 받아요.

import { NumberFormatter } from '@mantine/core';

function Demo() {
  return (
    <>
      <NumberFormatter value={1000000} thousandSeparator />
      <NumberFormatter value={1000000} thousandSeparator="." />
    </>
  );
}

소수 자릿수 (Decimal scale)

decimalScale prop은 허용되는 소수 자릿수를 제어해요.

import { NumberFormatter } from '@mantine/core';

function Demo() {
  return <NumberFormatter value={1.6667} decimalScale={2} />;
}

더 알아보기 (Learn more)

• Kbd
• OverflowList
• NumberInput