This is the v1.1 documentation. The current version is v2.0. Upgrade guide
UI libraries
Mask attaches to any input component. The examples below use the same hook API.
useViraMask() returns field props. Spread them onto an input; card.value is the formatted display and card.rawValue is the raw form value.
Common pattern
const { card } = useViraMask({
form,
schema: {
card: "card",
},
})
// card.value → "4111 1111 1111 1111" (display)
// card.rawValue → "4111111111111111" (raw form value)
return <input {...card} placeholder="0000 0000 0000 0000" />shadcn/ui
Live demos on this site also use shadcn Input. Props are spread directly:
Form value: -
Display: -
Ant Design
antd Input accepts native input props. Same pattern:
import { useForm } from "react-hook-form"
import { useViraMask } from "@virastack/mask"
import { Input } from "antd"
function Example() {
const form = useForm<{ card: string }>()
const { card } = useViraMask({
form,
schema: {
card: "card",
},
})
return <Input {...card} placeholder="0000 0000 0000 0000" />
}Chakra UI
Chakra Input works the same way:
import { useForm } from "react-hook-form"
import { useViraMask } from "@virastack/mask"
import { Input } from "@chakra-ui/react"
function Example() {
const form = useForm<{ card: string }>()
const { card } = useViraMask({
form,
schema: {
card: "card",
},
})
return <Input {...card} placeholder="0000 0000 0000 0000" />
}