AnimateCounter

숫자를 목표값까지 세어 올립니다. 라이브러리에서 유일하게 상자가 아니라 내용 자체가 주제인 애니메이션입니다. 매 프레임 값을 보간하고 형식을 입히는 일은 keyframe이 할 수 있는 것이 아닙니다.

import { AnimateCounter, Statistic } from 'neba';

<Statistic label="Monthly active" value={<AnimateCounter value={128400} />} />;

Props

Prop	타입	기본값	설명
value *	number	—	도착할 숫자
from	number	0	출발할 숫자
duration공통	number	1200	세는 데 걸리는 시간(ms)
delay공통	number	0	시작 전 대기(ms)
format	Intl.NumberFormatOptions	—	숫자를 쓰는 방식. 통화·백분율·compact 표기가 콜백이 아니라 prop입니다
locale	string	—	숫자를 쓸 언어
trigger공통	'mount' | 'visible' | 'hover' | 'manual'	'mount'	무엇이 세기를 시작하는지. 시작 전에는 from에 머뭅니다
play	boolean	—	trigger가 manual일 때 세기 시작합니다
once공통	boolean	true	trigger가 visible일 때 처음 한 번만 셀지
threshold공통	number	0.2	trigger가 visible일 때 화면에 얼마나 들어와야 하는지
render	useRender.RenderProp	—	div 대신 다른 요소로 렌더링합니다 (render={<strong />}). Base UI의 render prop 그대로

나머지 <div> 속성은 루트로 그대로 전달됩니다. easing, repeat, alternate는 없습니다. 숫자는 한쪽에서만 값에 다가갈 수 있으므로 곡선은 고정된 ease-out이고, 반복되는 카운트라는 것은 존재하지 않습니다.

Statistic과 짝을 이룹니다. Statistic의 value가 노드를 받는 것이 이 조합을 위해서입니다. 숫자는 즉시 그리면서 그 주변만 애니메이션하는 대시보드는 강조를 정확히 반대로 둔 것입니다.

예시

format과 locale

Intl.NumberFormat 옵션입니다. 통화, 백분율, 1.2M 같은 compact 표기가 format 콜백이 아니라 prop입니다. Statistic과 진행 표시기들이 받는 것과 같은 prop입니다.

import { useState } from 'react';
import { AnimateCounter, Button, Grid, GridContainer, Statistic } from 'neba';

export default function AnimateCounterFormats() {
  const [run, setRun] = useState(0);

  return (
    <div className="flex w-full flex-col gap-4">
      <Button variant="outline" size="sm" onClick={() => setRun((n) => n + 1)}>
        Count again
      </Button>

      <GridContainer key={run} spacing={3}>
        <Grid span={{ xs: 12, sm: 4 }}>
          <Statistic
            label="Revenue"
            value={
              <AnimateCounter
                value={48250}
                locale="en-US"
                format={{ style: 'currency', currency: 'USD', maximumFractionDigits: 0 }}
              />
            }
          />
        </Grid>
        <Grid span={{ xs: 12, sm: 4 }}>
          <Statistic
            label="Conversion"
            value={
              <AnimateCounter
                value={0.184}
                format={{ style: 'percent', maximumFractionDigits: 1 }}
              />
            }
          />
        </Grid>
        <Grid span={{ xs: 12, sm: 4 }}>
          <Statistic
            label="Tickets closed"
            value={<AnimateCounter value={1943} duration={2000} />}
          />
        </Grid>
      </GridContainer>
    </div>
  );
}

trigger

화면 아래쪽 대시보드에서 손이 가는 것은 trigger="visible"입니다. 스크롤해서 닿았을 때 이미 끝나 있는 카운트는 본 적이 없는 것과 같습니다. 시작 전에는 정답이 아니라 from에 머뭅니다.

<AnimateCounter value={128400} trigger="visible" />

접근성

• 완성된 숫자는 첫 프레임부터 스크린 리더를 위해 잘린 상자 안에 들어 있고, 세는 것은 aria-hidden인 사본입니다. 볼 수 없는 독자는 중간값 백 개가 아니라 답을 듣습니다.
• 모션 감소 설정에서는 곧바로 답을 보여 줍니다.