Number

Integers with thousands separators (1,234). Add decimals, a sign, min and max; country: "TR" for Turkish separators.

← All examples·number

Preview

Form value: -

Display: -

import { useForm } from "react-hook-form"
import { useViraMask } from "@virastack/mask"
 
function Example() {
  const form = useForm<{ number: string }>()
  const { number } = useViraMask(form, { number: "number" })
 
  return <input {...number} placeholder="1,234" />
}

Details

Preset: "number"
Form value: "1234"
Error keys: number.min, number.max
Max applies while typing, min on blur.

Customization

Limits and decimals

min, max, scale (fraction digits), signed and locale.

Form value: -

Display: -

useViraMask(form, {
  quantity: { preset: "number", number: { min: 1, max: 99 } },
  weight: { preset: "number", number: { scale: 2, locale: "en-US" } },
})

Turkish separators

country: "TR" uses a dot for thousands and a comma for decimals.

Form value: -

Display: -

useViraMask(form, {
  amount: { preset: "number", country: "TR", number: { scale: 2 } }, // 1.234,56
})

For the hook API see useViraMask(); for your own pattern see custom mask.

Number

Integers with thousands separators (1,234). Add decimals, a sign, min and max; country: "TR" for Turkish separators.

← All examples·number

Preview

Form value: -

Display: -

import { useForm } from "react-hook-form"
import { useViraMask } from "@virastack/mask"
 
function Example() {
  const form = useForm<{ number: string }>()
  const { number } = useViraMask(form, { number: "number" })
 
  return <input {...number} placeholder="1,234" />
}

Details

Preset: "number"
Form value: "1234"
Error keys: number.min, number.max
Max applies while typing, min on blur.

Customization

Limits and decimals

min, max, scale (fraction digits), signed and locale.

Form value: -

Display: -

useViraMask(form, {
  quantity: { preset: "number", number: { min: 1, max: 99 } },
  weight: { preset: "number", number: { scale: 2, locale: "en-US" } },
})

Turkish separators

country: "TR" uses a dot for thousands and a comma for decimals.

Form value: -

Display: -

useViraMask(form, {
  amount: { preset: "number", country: "TR", number: { scale: 2 } }, // 1.234,56
})

For the hook API see useViraMask(); for your own pattern see custom mask.