Kart

← Tüm örnekler·card

Önizleme

import { useForm } from "react-hook-form"
import { useViraMask } from "@virastack/mask"
 
function Example() {
  const form = useForm<{ card: string }>()
  const { card } = useViraMask({
    form,
    schema: { card: "card" },
  })
 
  const { rawValue, ...inputProps } = card
 
  return <input {...inputProps} placeholder="0000 0000 0000 0000" />
}

Detaylar

• Maske: 9999 9999 9999 9999
• Hazır maske: "card"
• Yerleşik validator: 'luhn' Geçersiz değer girildiğinde form hatası üretir.
• 34/37 ile başlayan numaralarda Amex maskesi (4-6-5) kullanılır.
• Form değeri maskesiz ham rakamlardır.
• onCardTypeChange ile visa / mastercard / amex / troy dinlenebilir.

Özelleştirme

{ preset: "card", onCardTypeChange: (type) => console.log(type) }

Hook API için useViraMask(), özel maske için custom mask.