ViraStack Mask

React Hook Form için hafif, bağımlılıksız bir maskeleme kütüphanesi.

Girdi maskeleme, para birimi biçimlendirme ve doğrulama işlemlerini yönetmek için React Hook Form ile sorunsuz bir şekilde entegre olan bir useViraMask hook’u sağlar.

Kurulum

$ pnpm add @virastack/input-mask

Not: react-hook-form bir peer dependency’dir (eş bağımlılık).

Hızlı Başlangıç

import { useViraMask } from '@virastack/input-mask';
import { useForm } from 'react-hook-form';
 
const App = () => {
  const form = useForm({
    defaultValues: {
      cardNumber: '',
      expiry: '',
      cvv: '',
    },
  });
 
  const { cardNumber, expiry, cvv } = useViraMask({
    form,
    schema: {
      cardNumber: 'card',
      expiry: 'expiry',
      cvv: 'cvv',
    },
  });
 
  const onSubmit = (data) => console.log(data);
 
  return (
    <form onSubmit={form.handleSubmit(onSubmit)}>
      <input {...cardNumber} placeholder="Kart Numarası" />
      <input {...expiry} placeholder="AA/YY" />
      <input {...cvv} placeholder="CVV" />
      <button type="submit">Gönder</button>
    </form>
  );
};

Özellikler

• Sıfır bağımlılık: Hafif ve odaklanmış.
• React Hook Form entegrasyonu: RHF v7+ için tasarlandı.
• Bildirimsel şema: Maskeleri ve doğrulama kurallarını basit bir nesnede tanımlayın.
• Dahili hazır ayarlar: Kredi Kartı, IBAN, TCKN, Telefon, Tarih vb. gibi yaygın desenler.
• Özel maskeler: Esnek desen tanımı (rakamlar için 9, harfler için a, alfasayısal için *).
• Para birimi desteği: Yapılandırılabilir hassasiyet, ayırıcılar ve semboller.
• Doğrulama: Dahili Luhn, TCKN ve VKN algoritmaları, artı özel doğrulayıcılar.
• TypeScript: Tamamen tiplendirilmiş.

Örnekler

Kredi kartı, telefon, para birimi, tarih ve daha fazlası gibi her bir hazır ayarın canlı demoları için Örnekler sayfasına bakın.