React Hook Form İçin Akıllı Mask ve Doğrulama
Bu makaledeki @omergulcicek/forms paketi artık @virastack/input-mask olarak ViraStack altında yayınlanıyor. Güncel dokümantasyon ve kurulum için siteyi ziyaret edin.
@virastack/input-mask (eski adı @omergulcicek/forms)
React projelerinde form doğrulama ve input mask işlemleriyle uğraşmak çoğu zaman zahmetli olabiliyor. Bu ihtiyacı karşılamak için geliştirdiğim @virastack/input-mask (eski adı @virastack/input-mask) paketi ile, TypeScript desteğiyle birlikte kolayca maskeleme ve doğrulama işlemlerini yönetebilirsin.
🚀 Canlı Önizleme
Paketi canlı olarak denemek için: virastack.com/tr/input-mask
Özellikler
- Akıllı mask: Kart numarası, telefon, TCKN gibi alanlarda otomatik maskeleme
- Regex doğrulama: Gömülü desenlerle hızlı doğrulama
- Klavye kısıtlaması: Sadece rakam veya harf kabul eden alanlar
- TypeScript desteği: Tam tip güvenliği
- shadcn/ui uyumluluğu: Modern ve şık arayüzlerle sorunsuz entegrasyon
Kurulum
Peer dependency olarak react, react-hook-form ve use-mask-input gerektirir.
npm install @virastack/input-mask
npm install react react-hook-form use-mask-inputKullanım
Aşağıdaki gibi kolayca entegre edebilirsin:
import { useForm } from "react-hook-form"
import { useFormFields } from "@virastack/input-mask"
import { useHookFormMask } from "use-mask-input"
const form = useForm()
const registerWithMask = useHookFormMask(form.register)
const { cardNumber, phone, email, tckn } = useFormFields({
fields: [
{ name: "cardNumber", type: "cardNumber" },
{ name: "phone", type: "phone" },
{ name: "email", type: "email" },
{ name: "tckn", type: "tckn" }
],
registerWithMask,
form
})
console.log(cardNumber.value) // "1234567890123456" (unmasked)
console.log(cardNumber.maskedValue) // "1234 5678 9012 3456" (masked)<form onSubmit="{form.handleSubmit(console.log)}">
<input {...cardNumber} placeholder="**** **** **** ****" />
<input {...phone} placeholder="(5xx) xxx xx xx" />
<input {...email} placeholder="email@example.com" />
<input {...tckn} placeholder="12345678950" />
<button type="submit">Gönder</button>
</form>shadcn/ui ile Kullanım
shadcn/ui bileşenleriyle de tam uyumlu çalışır:
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
;<form onSubmit={form.handleSubmit(console.log)} className="space-y-4">
<div>
<Label htmlFor="cardNumber">Kart Numarası</Label>
<Input {...cardNumber} placeholder="**** **** **** ****" />
</div>
<div>
<Label htmlFor="phone">Telefon</Label>
<Input {...phone} placeholder="(5xx) xxx xx xx" />
</div>
<Button type="submit">Gönder</Button>
</form>Neden @virastack/input-mask?
- Form alanlarını hızlıca tanımla, mask ve doğrulama otomatik gelsin
- Modern arayüzlerle sorunsuz çalışır
- TypeScript ile güvenli ve hatasız kod yaz
- Türkiye'ye özel TCKN ve telefon gibi alanlar hazır
Katkıda Bulun
GitHub üzerinden açık kaynak olarak geliştirmekteyim: github.com/virastack/input-mask. Herhangi bir sorunla karşılaştığınızda issue açabilir veya PR gönderebilirsiniz. GitHub üzerinden repo'yu yıldızlayıp bana destek olabilirsiniz.