useViraMask()

Temel kullanım

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

Schema

Her alan için üç yazım geçerlidir:

• Preset string: { phone: "phone" }
• Options nesnesi: { amount: { currency: { decimalSeparator: ",", thousandSeparator: ".", symbol: "₺" } } }
• Preset + override: { card: { preset: "card", onCardTypeChange: fn } }

Tüm hazır maskeler için örnekler sayfasına bakın. Sıfırdan maske için custom mask.

Dönüş değeri

useViraMask(), schema’daki her anahtar için bir MaskField döner.rawValue’yu DOM’a yaymamak için ayırın — value inputProps içinde kalır: const { rawValue, ...inputProps } = phone

• value: formatlı (display) değer
• rawValue: formda tutulan ham değer
• ref, name, onChange, onBlur, onFocus, onKeyDown
• type, inputMode, autoComplete
• aria-invalid, aria-describedby, title

React Hook Form

• Her alan register edilir; doğrulama validate.maskFormat altında çalışır.
• setValue ile forma ham değer yazılır (shouldValidate / shouldDirty / shouldTouch).
• Doğrulama yalnızca validate: true ve değer boş değilken koşulur; ayrıntılar validation sayfasında.