useViraMask()

Basic usage

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

Three forms are valid for each field:

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

See the examples page for all presets. For masks from scratch, see custom mask.

Return value

useViraMask() returns a MaskField for each key in the schema. Strip rawValue before spreading so it never lands on the DOM - value stays in inputProps: const { rawValue, ...inputProps } = phone

• value: formatted (display) value
• rawValue: raw value stored in the form
• ref, name, onChange, onBlur, onFocus, onKeyDown
• type, inputMode, autoComplete
• aria-invalid, aria-describedby, title

React Hook Form

• Each field is registered; validation runs under validate.maskFormat.
• setValue writes the raw value to the form (shouldValidate / shouldDirty / shouldTouch).
• Validation runs only when validate: true and the value is not empty; details on the validation page.