---
title: "ViraStack Mask: React Hook Form için Input Maskeleme"
description: "Kart, telefon, IBAN ve TCKN gibi alanlar için hazır maske ve doğrulama sunar; React Hook Form ile formatlı görünümü ham form state'inden ayırır."
url: https://omergulcicek.com/blog/virastack-mask
author: "Ömer Gülçiçek"
published: 2026-08-02
language: tr
tags: ["ViraStack","React"]
note: "Interactive demos are left out of this Markdown copy; open the url for the full post."
---

# ViraStack Mask: React Hook Form için Input Maskeleme

Bir ödeme formu yazıyorsanız kart numarası alanı tek başına yeterince dert: kaç hane alınacak, boşluklar nasıl görünecek, numara gerçekten geçerli mi? Arka planda **Luhn algoritması** gibi kontroller var; bunları elle kurup bolca test etmek gerekiyor. İşin içine **American Express** girince iş daha da büyüyor - kart maskesi değişiyor, CVV üç haneden dörde çıkıyor. Her kart tipini sürekli kontrol etmek ve test etmek hem zaman alıyor hem de hata riskini artırıyor. Yapay zekâ bu parçaları üretebilir elbette; fakat her projeye ayrı kod yazmak, modelin uydurma riski, çıktının gerçekten tüm senaryolardan geçip geçmediği ve sonradan kodu okuyan birinin elinde net bir dokümantasyon olmaması ayrı yükler getirir. Hazır ve test edilmiş bir paket kullanmak bu risklerin çoğunu baştan azaltır.

**ViraStack Mask** (`@virastack/mask`) tam bu noktada devreye giriyor. Kart, son kullanma tarihi ve CVV için hazır kurallar sunar; React Hook Form ile çalışır. Kullanıcı formatlı görür, forma ham değer gider.

## Ne Yapıyor?

**ViraStack Mask**, sık kullanılan alanlar için hazır preset'ler getirir: kredi kartı, telefon, IBAN, TCKN, para birimi ve daha fazlası. Kart numarasında _Luhn_ doğrulaması, son kullanma tarihinde tarih kontrolü, TCKN ve IBAN gibi alanlarda da ilgili kurallar **varsayılan olarak gömülü**. Amex girildiğinde kart maskesi ve CVV uzunluğu kendiliğinden uyarlanır - ekstra kontrol etmenize gerek kalmaz.

Özel bir format ihtiyacınız varsa `9` / `a` / `*` desenleriyle kendi maskenizi de tanımlayabilirsiniz.

## Kredi kartı form örneği

Aşağıdaki demoda kart numarası, son kullanma ve CVV birlikte çalışıyor. Geçersiz bir numara yazınca hata görünür; Amex ile başlayan bir numarada (ör. `34…`) maskenin ve CVV hanesinin nasıl değiştiğine bakın. Altında hem ham değer (`rawValue`) hem de ekranda görünen formatlı değer görünür.

## Nasıl kullanılır?

```bash
npm install @virastack/mask
```

```tsx
import { useForm } from "react-hook-form"
import { useViraMask } from "@virastack/mask"

const form = useForm({
  defaultValues: { card: "", expiry: "", cvv: "" },
  mode: "onChange"
})

const { card, expiry, cvv } = useViraMask({
  form,
  schema: {
    card: {
      preset: "card",
      errorMessage: "Geçersiz kart numarası"
    },
    expiry: {
      preset: "expiry",
      errorMessage: "Geçersiz son kullanma tarihi"
    },
    cvv: "cvv"
  }
})

const { rawValue, ...cardProps } = card
// <input {...cardProps} />
```

Aynı şema modeliyle **telefon**, **IBAN**, **TCKN**, e-posta veya para birimi alanlarını da ekleyebilirsiniz. TCKN için *algoritmik doğrulama*, IBAN için *mod-97* kontrolü hazır gelir; yalnızca harf veya rakam kabul eden basit maskeler de mevcuttur. Üç kart alanı tek şemada bağlanır - kart tipi değişince CVV bunu takip eder, submit'te state'te boşluksuz ham numara kalır.

Kurulum, API ve canlı örnekler için [virastack.com/mask](https://virastack.com/mask) adresine, kredi kartı örneğinin dokümantasyonuna [buradan](https://www.virastack.com/tr/mask/docs/examples/credit-card), kaynak kod için [github.com/virastack/mask](https://github.com/virastack/mask) deposuna bakabilirsiniz.

ViraStack ürünleri açık kaynak ve ücretsiz. Destek olmak isterseniz [GitHub](https://github.com/virastack) üzerinde bir yıldız bırakabilirsiniz - ekosistemin daha çok kişiye ulaşmasına yardımcı olur.