RollingNumber

RollingNumber

굴러가는 숫자 전환으로 값 변경을 애니메이션 처리하는 컴포넌트예요. 값이 변경될 때 각 숫자가 독립적으로 새로운 위치로 굴러가요.

출처: 문서

본문

사용법 (Usage)

RollingNumber은 굴러가는 숫자 전환으로 값 변경을 애니메이션 처리해요. 값이 변경되면 각 숫자가 독립적으로 새 위치로 굴러가요.

import { useState } from 'react';
import { Button, Group, RollingNumber } from '@mantine/core';

function Demo() {
  const [value, setValue] = useState(1234);

  return (
    <>
      <RollingNumber value={value} />
      <Group mt="md">
        <Button onClick={() => setValue((v) => v + 1)}>Increment</Button>
        <Button onClick={() => setValue((v) => v - 1)}>Decrement</Button>
        <Button onClick={() => setValue(Math.floor(Math.random() * 10000))}>Random</Button>
      </Group>
    </>
  );
}

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

prefix와 suffix prop으로 애니메이션 숫자 앞뒤에 정적 텍스트를 추가할 수 있어요. thousandSeparator로 천 단위를 구분하고, decimalScale과 fixedDecimalScale로 소수 형식을 제어할 수 있어요.

import { useState } from 'react';
import { Button, Group, RollingNumber } from '@mantine/core';

function Demo() {
  const [value, setValue] = useState(99.99);

  return (
    <>
      <RollingNumber
        value={value}
        prefix="$ "
        suffix=" USD"
        thousandSeparator
        decimalScale={2}
        fixedDecimalScale
      />
      <Group mt="md">
        <Button onClick={() => setValue((v) => +(v + 10.5).toFixed(2))}>+10.50</Button>
        <Button onClick={() => setValue((v) => +(v - 10.5).toFixed(2))}>-10.50</Button>
        <Button onClick={() => setValue(+(Math.random() * 10000).toFixed(2))}>Random</Button>
      </Group>
    </>
  );
}

애니메이션 지속 시간 (Animation duration)

animationDuration prop(밀리초 단위, 기본값은 600)으로 애니메이션 속도를 제어해요. timingFunction prop으로 CSS 타이밍 함수를 변경할 수 있어요(기본값은 ease).

import { useState } from 'react';
import { Button, Group, RollingNumber, Stack, Text } from '@mantine/core';

function Demo() {
  const [value, setValue] = useState(500);

  return (
    <>
      <Stack>
        <Text>200ms</Text>
        <RollingNumber value={value} animationDuration={200} />
        <Text>600ms (default)</Text>
        <RollingNumber value={value} />
        <Text>1200ms</Text>
        <RollingNumber value={value} animationDuration={1200} />
      </Stack>
      <Button onClick={() => setValue(Math.floor(Math.random() * 1000))}>Random</Button>
    </>
  );
}

텍스트 선택과 복사 (Text selection and copying)

각 애니메이션 숫자는 가능한 모든 값의 스택으로 렌더링되고, 현재 숫자만 표시되도록 잘라내기(clip)돼요. 숨겨진 숫자가 클립보드에 들어가지 않도록 애니메이션 부분은 선택할 수 없어요. 텍스트 선택은 숫자 위에 렌더링되는 형식화된 값의 투명한 복사본이 처리해요. RollingNumber을 선택하고 복사하면 항상 표시된 값 그대로, 예를 들어 $ 1,234.56 USD처럼 복사돼요.

더 알아보기 (Learn more)

• OverflowList
• Spoiler