Bu v1.1 dokümanı. Güncel sürüm v2.0. Yükseltme rehberi
UI kütüphaneleri
Mask herhangi bir input bileşenine bağlanır. Aşağıdaki örnekler aynı hook API’sini kullanır.
useViraMask() alan props’larını döndürür. Input’a doğrudan spread edin; card.value formatlı görünümü, card.rawValue formdaki ham değeri verir.
Ortak pattern
const { card } = useViraMask({
form,
schema: {
card: "card",
},
})
// card.value → "4111 1111 1111 1111" (ekranda görünen)
// card.rawValue → "4111111111111111" (formdaki ham değer)
return <input {...card} placeholder="0000 0000 0000 0000" />shadcn/ui
Bu sitedeki canlı demolar da shadcn Input kullanır. Props doğrudan spread edilir:
Form değeri: -
Görünen: -
Ant Design
antd Input native input props kabul eder. Aynı 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 de aynı şekilde çalışır:
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" />
}