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:
rawValue: -
value: -
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" />
}