پاک کردن با محو شدن
clear-inputانیمیشنفیلد جستجویی که با زدن ×، کلمههاش یکییکی از سمت راست با کمی نور و تاری پایین میریزن و placeholder از بالا برمیگرده.
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add clear-inputنصب دستی
محتوای تب «کد» را در
components/animations/clear-input.tsxبگذارید. کلیدفریم را هم بهglobals.cssاضافه کنید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { ClearInput } from "@/components/animations/clear-input"23const [q, setQ] = useState("")4<ClearInput value={q} onChange={setQ} placeholder="جستجوی محصول…" />پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| value / onChange | string / (v) => void | - | کنترلشده؛ پاک کردن هم onChange('') را صدا میزنه. |
| placeholder | string | "جستجو…" | متن راهنما که بعد از پاک شدن از بالا میافته. |
نکتهها
- کلمهها بهصورت کامل انیمیت میشن، نه حرفبهحرف، پس اتصال حروف فارسی به هم نمیریزه. Escape هم فیلد را پاک میکنه.