Components
Rolling Number
숫자가 변경될 때 부드러운 롤링 애니메이션 효과를 보여주는 컴포넌트입니다.
12345
"use client";import { useState } from "react";import { RollingNumber } from "@/registry/default/components/rolling-number";import { Button } from "@/components/ui/button";import { Plus, Minus, RefreshCw } from "lucide-react";export function RollingNumberExample() { const [number, setNumber] = useState(12345); const increment = () => setNumber((prev) => prev + 1); const decrement = () => setNumber((prev) => prev - 1); const addTen = () => setNumber((prev) => prev + 10); const subtractTen = () => setNumber((prev) => prev - 10); const randomize = () => setNumber(Math.floor(Math.random() * 90000) + 10000); return ( <div className="flex flex-col items-center gap-6 p-4"> <div className="text-4xl font-mono font-bold tracking-wider py-4 px-6 min-w-[200px] text-center"> <RollingNumber number={number} /> </div> <div className="flex flex-wrap items-center gap-2"> <Button variant="outline" size="icon" onClick={decrement} aria-label="Decrement" > <Minus className="h-4 w-4" /> </Button> <Button variant="outline" size="sm" onClick={subtractTen}> -10 </Button> <Button variant="outline" size="sm" onClick={addTen}> +10 </Button> <Button variant="outline" size="icon" onClick={increment} aria-label="Increment" > <Plus className="h-4 w-4" /> </Button> <Button variant="secondary" size="sm" onClick={randomize} className="gap-2" > <RefreshCw className="h-3.5 w-3.5" /> 랜덤 </Button> </div> </div> );}설치
pnpm
pnpm dlx shadcn@latest add @chaesunbak/rolling-numbernpm
npx shadcn@latest add @chaesunbak/rolling-number다음 코드를 프로젝트에 복사/붙여넣기 하세요.
export const RollingNumber = ({ number }: { number: number }) => { const chars = String(number).split(""); return ( <div className="relative inline-flex items-center"> <span className="sr-only">{number}</span> <div className="flex" aria-hidden="true"> {chars.map((char, i) => { // 숫자인 경우 애니메이션이 적용된 Digit 컴포넌트 사용 if (/\d/.test(char)) { return <Digit key={i} value={Number(char)} />; } // 부호(-), 소수점(.) 등 기호는 일반 텍스트로 렌더링하여 에러 방지 return ( <div key={i} className="tabular-nums" style={{ height: "1em", lineHeight: "1" }} > {char} </div> ); })} </div> </div> );};const Digit = ({ value }: { value: number }) => { return ( <div className="overflow-hidden tabular-nums" style={{ height: "1em", lineHeight: "1", }} > <div className="flex flex-col" style={{ transform: `translateY(-${value}em)`, transition: "transform 0.5s cubic-bezier(0.4, 0, 0.2, 1)", }} > {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((n) => ( <div key={n} style={{ height: "1em", display: "flex", alignItems: "center", justifyContent: "center" }}> {n} </div> ))} </div> </div> );};추가적인 의존성 설치가 필요하지 않습니다.
사용법
import { RollingNumber } from "@/components/rolling-number";<RollingNumber number={12345} />인터페이스
RollingNumber
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
number | number | - | 표시할 숫자입니다. |