شمارنده
counterانیمیشنعددی که وقتی وارد دید شد، با اعداد فارسی تا مقدار نهایی بالا میره.
۰تومان
فروش امروز
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add counterنصب دستی
محتوای تب «کد» را در
components/animations/counter.tsxبگذارید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { Counter } from "@/components/animations/counter"23<Counter to={12_450_000} unit="تومان" className="text-3xl font-bold" />پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| to / from | number | - | مقصد و شروع. |
| duration | number | 1600 | میلیثانیه. |
| format | (n) => string | faNumber | قالب خودِ عدد. |
| unit | ReactNode | - | واحد، بیرون از جعبهی عدد تا هیچوقت جابهجا نشود. |
نکتهها
- مقدار نهایی به شکل نامرئی زیر عدد رندر میشه تا عرض از اول رزرو بشه. واحد هم بیرون از آن جعبهست، پس وقتی تعداد رقمها عوض میشه (مثلاً عبور از ۱۰ میلیون) نه عدد میپره نه «تومان».