Motile UI

NumberFlow

숫자를 부드럽게 애니메이션하는 React 컴포넌트입니다. 슬롯머신 스타일의 회전 애니메이션으로 자연스러운 숫자 전환을 제공하며, 로컬라이제이션과 애니메이션 타이밍 조정을 지원합니다.

미리보기

12,345

사용법

TSX
1"use client";
2
3import { useState, useEffect } from "react";
4import { NumberFlow } from "motile-ui";
5
6export default function PreviewExample() {
7  const [value, setValue] = useState(12345);
8
9  useEffect(() => {
10    const interval = setInterval(() => {
11      setValue(Math.floor(Math.random() * 100000));
12    }, 2000);
13    return () => clearInterval(interval);
14  }, []);
15
16  return <NumberFlow value={value} />;
17}

API 레퍼런스

NumberFlow

슬롯머신 스타일의 애니메이션 숫자 컴포넌트

속성타입기본값설명
valuenumber-표시할 숫자 값
localestring"ko-KR"숫자 포맷팅을 위한 로케일 (예: 'ko-KR', 'en-US')
durationnumber600애니메이션 지속 시간 (밀리초)
classNamestringundefined컨테이너 요소의 CSS 클래스

기본 <code>span</code> HTML 속성을 모두 사용할 수 있습니다.

예제

로케일 포맷팅

숫자 포맷팅을 위한 로케일 (예: 'ko-KR', 'en-US')

ko-KR:1,234,567
en-US:1,234,567
de-DE:1.234.567
TSX
1"use client";
2
3import { useState, useEffect } from "react";
4import { NumberFlow } from "motile-ui";
5
6export default function LocaleExample() {
7  const [value, setValue] = useState(1234567);
8
9  useEffect(() => {
10    const interval = setInterval(() => {
11      setValue(Math.floor(Math.random() * 10000000));
12    }, 2000);
13    return () => clearInterval(interval);
14  }, []);
15
16  return (
17    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
18      <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
19        <span style={{ width: "60px", color: "#666" }}>ko-KR:</span>
20        <NumberFlow value={value} locale="ko-KR" />
21      </div>
22      <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
23        <span style={{ width: "60px", color: "#666" }}>en-US:</span>
24        <NumberFlow value={value} locale="en-US" />
25      </div>
26      <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
27        <span style={{ width: "60px", color: "#666" }}>de-DE:</span>
28        <NumberFlow value={value} locale="de-DE" />
29      </div>
30    </div>
31  );
32}

애니메이션 속도

애니메이션 지속 시간 (밀리초)

Fast (300ms)1,000
Default (600ms)1,000
Slow (1200ms)1,000
TSX
1"use client";
2
3import { useState, useEffect } from "react";
4import { NumberFlow } from "motile-ui";
5
6export default function DurationExample() {
7  const [value, setValue] = useState(1000);
8
9  useEffect(() => {
10    const interval = setInterval(() => {
11      setValue(Math.floor(Math.random() * 10000));
12    }, 2500);
13    return () => clearInterval(interval);
14  }, []);
15
16  return (
17    <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
18      <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
19        <span style={{ color: "#666", fontSize: "14px" }}>Fast (300ms)</span>
20        <NumberFlow value={value} duration={300} />
21      </div>
22      <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
23        <span style={{ color: "#666", fontSize: "14px" }}>Default (600ms)</span>
24        <NumberFlow value={value} duration={600} />
25      </div>
26      <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
27        <span style={{ color: "#666", fontSize: "14px" }}>Slow (1200ms)</span>
28        <NumberFlow value={value} duration={1200} />
29      </div>
30    </div>
31  );
32}

카운트다운 타이머

부드러운 전환과 함께 카운트다운 타이머에 NumberFlow를 사용합니다.

Countdown:60seconds
TSX
1"use client";
2
3import { useState, useEffect } from "react";
4import { NumberFlow } from "motile-ui";
5
6export default function CountdownExample() {
7  const [seconds, setSeconds] = useState(60);
8
9  useEffect(() => {
10    const interval = setInterval(() => {
11      setSeconds((prev) => (prev > 0 ? prev - 1 : 60));
12    }, 1000);
13    return () => clearInterval(interval);
14  }, []);
15
16  return (
17    <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
18      <span style={{ color: "#666", fontSize: "14px" }}>Countdown:</span>
19      <NumberFlow value={seconds} duration={400} />
20      <span style={{ color: "#666", fontSize: "14px" }}>seconds</span>
21    </div>
22  );
23}

버튼으로 값 조절

버튼을 클릭하여 숫자를 증가하거나 감소시킬 수 있습니다.

1,000
TSX
1"use client";
2
3import { useState } from "react";
4import { NumberFlow, Button } from "motile-ui";
5
6export default function StepperExample() {
7  const [value, setValue] = useState(1000);
8
9  return (
10    <div style={{ textAlign: "center" }}>
11      <NumberFlow value={value} style={{ fontSize: "2rem", fontWeight: "bold", marginBottom: "1.5rem" }} />
12      <div
13        style={{ display: "flex", gap: "0.5rem", justifyContent: "center", flexWrap: "wrap" }}
14      >
15        <Button size="small" variant="secondary" onClick={() => setValue((v) => v - 100)}>
16          -100
17        </Button>
18        <Button size="small" variant="secondary" onClick={() => setValue((v) => v - 10)}>
19          -10
20        </Button>
21        <Button size="small" variant="secondary" onClick={() => setValue((v) => v + 10)}>
22          +10
23        </Button>
24        <Button size="small" variant="secondary" onClick={() => setValue((v) => v + 100)}>
25          +100
26        </Button>
27        <Button size="small" variant="secondary" onClick={() => setValue(Math.floor(Math.random() * 100000))}>
28          Random
29        </Button>
30      </div>
31    </div>
32  );
33}
NumberFlow | Motile UI