Custom mask (plate)

Write your own pattern: 9 digit, a letter, [ ] optional part.

Preview

Form value: -

Display: -

import { useForm } from "react-hook-form"
import { definePreset, useViraMask } from "@virastack/mask"
 
// 9 digit · a letter · [optional part]
const plateMask = definePreset("plate", { mask: "99 a[aa] 99[99]", transform: "uppercase" })
 
function Example() {
  const form = useForm<{ plate: string }>()
  const { plate } = useViraMask(form, { plate: plateMask })
 
  return <input {...plate} placeholder="34 ABC 123" />
}

Details

Pattern: 99 a[aa] 99[99]
Form value: "34ABC123"
Error keys: plate.incomplete
transform: "uppercase" turns letters into capitals.
The error key comes from the preset name: plate.incomplete.

Customization

Sharing with definePreset

Define it once; the hook, the server and tests use the same mask.

// masks.ts — shared by the client and the server
import { definePreset } from "@virastack/mask/server"
 
export const plate = definePreset("plate", {
  mask: "99 a[aa] 99[99]",
  transform: "uppercase",
})
 
// form
useViraMask(form, { plate })

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