کد تأیید
otp-fieldکامپوننتکد تأیید ششخانهای با اعداد فارسی که از پیامک خودش پر میشه.
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add otp-fieldنصب دستی
محتوای تب «کد» را در
components/ui/otp-field.tsxبگذارید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { OtpField } from "@/components/ui/otp-field"23<OtpField length={6} onComplete={(code) => verify(code)} />پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| length | number | 6 | تعداد خانهها. |
| onComplete | (code: string) => void | - | وقتی همهی خانهها پر شد صدا زده میشه و کد را با اعداد لاتین برمیگردونه. |
| value / onChange | string | - | حالت کنترلشده. |
نکتههای راستچین
- خانهها LTR چیده میشن چون کد از پیامک به همان ترتیب خوانده میشه.
- autoComplete="one-time-code" روی خانهی اول، پیشنهاد کد از پیامک را در iOS و اندروید فعال میکنه.