UI Libraries

ViraStack Mask is designed to work seamlessly with any UI library that exposes an input ref and standard events.

shadcn/ui

You can easily integrate ViraStack Mask with shadcn/ui components.


import { useViraMask } from '@virastack/input-mask';
import { useForm } from 'react-hook-form';
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
 
export function ShadcnExample() {
  const form = useForm();
  
  const { phone, amount } = useViraMask({
    form,
    schema: {
      phone: 'phone',
      amount: {
        currency: {
          symbol: '₺',
        }
      }
    },
  });
 
  return (
    <div className="grid w-full max-w-sm items-center gap-1.5">
      <Label htmlFor="phone">Phone</Label>
      <Input {...phone} id="phone" placeholder="(555) 555 55 55" />
      
      <Label htmlFor="amount">Amount</Label>
      <Input {...amount} id="amount" placeholder="0,00 ₺" />
    </div>
  );
}

The fields object returned by useViraMask contains all the necessary props (onChange, onBlur, ref, etc.) that shadcn/ui’s Input component expects.