ViraStack
  • About
  • Support
HomeGet StartedExamples

Getting started

  • Introduction
  • llms.txt
  • llms-full.txt

Usage

  • useViraMask()
  • Custom mask
  • Validation
  • Helpers
  • Types
  • UI libraries

Types

TypeScript types exported from the package.

MaskPreset

type MaskPreset =
  | "card" | "expiry" | "cvv" | "tckn" | "phone"
  | "email" | "url" | "username" | "alpha" | "password"
  | "text" | "currency" | "iban" | "numeric" | "date"
  | "taxNumber" | "zipCode"

MaskOptions

Notable fields:

interface MaskOptions {
  mask?: string
  transform?: "uppercase" | "lowercase"
  allowedChars?: RegExp
  forbiddenChars?: RegExp
  currency?: CurrencyOptions
  displayPrefix?: string
  preset?: MaskPreset
  validate?: boolean
  validator?:
    | ((value: string) => boolean)
    | "luhn" | "tckn" | "email" | "iban"
    | "expiry" | "date" | "url" | "vkn"
  errorMessage?: string
  dateFormat?: "DMY" | "MDY" | "YMD"
  resolveMask?: (
    value: string,
    allValues?: FieldValues,
    schema?: MaskSchema<FieldValues>,
  ) => string | undefined
  onCardTypeChange?: (
    type: "visa" | "mastercard" | "amex" | "troy" | "unknown",
  ) => void
  // + type, inputMode, autoComplete, alphaFormat, usernameFormat…
}

CurrencyOptions: precision, decimalSeparator, thousandSeparator, symbol, symbolPosition.

Schema & fields

  • MaskSchema<T>: form field name → preset string | MaskOptions
  • UseViraMaskProps: { form, schema }
  • MaskField: props spread onto a single input
  • MaskFields<TSchema>: hook return type
  • PRESETS: Record<MaskPreset, MaskOptions>
PreviousHelpersNextUI libraries

On this page

  • MaskPreset
  • MaskOptions
  • Schema & fields
Something wrong? Fix it