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?

npm install @virastack/mask

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 adresine, kredi kartı örneğinin dokümantasyonuna buradan, kaynak kod için github.com/virastack/mask deposuna bakabilirsiniz.

ViraStack ürünleri açık kaynak ve ücretsiz. Destek olmak isterseniz GitHub üzerinde bir yıldız bırakabilirsiniz - ekosistemin daha çok kişiye ulaşmasına yardımcı olur.