Currency

Currency format with thousand / decimal separators. The raw form value uses dot decimal (e.g. 1234.56).

← All examples·currency

Preview

rawValue: -

value: -

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

Details

Preset: "currency"
Defaults (US/English): precision 2, decimal '.', thousand ',', empty symbol, prefix. Digits alone are the integer part (123456 → 123,456).
Uses the currency strategy instead of a pattern mask. Form raw always uses dot decimal (1234.56).

Customization

Turkish Lira customization

Override separators and add ₺ for TR locale.

rawValue: -

value: -

import { useForm } from "react-hook-form"
import { useViraMask } from "@virastack/mask"
 
const form = useForm({ defaultValues: { amount: "" } })
 
const { amount } = useViraMask({
  form,
  schema: {
    amount: {
      currency: {
        precision: 2,
        decimalSeparator: ",",
        thousandSeparator: ".",
        symbol: "₺",
        symbolPosition: "prefix",
      },
    },
  },
})
 
const { rawValue, ...inputProps } = amount
 
<input {...inputProps} placeholder="₺1.234,56" />

See useViraMask() for the hook API and custom mask for custom masks.

Currency

Currency format with thousand / decimal separators. The raw form value uses dot decimal (e.g. 1234.56).

← All examples·currency

Preview

rawValue: -

value: -

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

Details

Preset: "currency"
Defaults (US/English): precision 2, decimal '.', thousand ',', empty symbol, prefix. Digits alone are the integer part (123456 → 123,456).
Uses the currency strategy instead of a pattern mask. Form raw always uses dot decimal (1234.56).

Customization

Turkish Lira customization

Override separators and add ₺ for TR locale.

rawValue: -

value: -

import { useForm } from "react-hook-form"
import { useViraMask } from "@virastack/mask"
 
const form = useForm({ defaultValues: { amount: "" } })
 
const { amount } = useViraMask({
  form,
  schema: {
    amount: {
      currency: {
        precision: 2,
        decimalSeparator: ",",
        thousandSeparator: ".",
        symbol: "₺",
        symbolPosition: "prefix",
      },
    },
  },
})
 
const { rawValue, ...inputProps } = amount
 
<input {...inputProps} placeholder="₺1.234,56" />

See useViraMask() for the hook API and custom mask for custom masks.