ViraStack Input Mask

The lightweight standard for input formatting and state synchronization in React.

• 🚀 Ultra-lightweight: Less than 5KB minified & zipped.
• ⚛️ React-First: Seamless integration with React Hook Form.
• 🛡️ Type-Safe: Built with TypeScript for an excellent developer experience.
• 🧠 Smart Presets: Built-in masks for credit cards, phones, currency, and more.

Read the docs →

Quick Start

npm install @virastack/input-mask

import { useForm } from 'react-hook-form';
import { useViraMask } from '@virastack/input-mask';

function App() {
  const form = useForm();
  
  const { phone } = useViraMask({
    form,
    schema: {
      phone: 'phone'
    }
  });

  return (
    <form>
      <input {...phone} placeholder="(555) 555 55 55" />
    </form>
  );
}

Explore the ViraStack Ecosystem

Projects

• Next.js Boilerplate - Production-ready Next.js 16+ starter template built with Tailwind CSS 4 and TypeScript.
• AI Rules - AI-native architecture kit and high-discipline protocols for modern React applications.
• Input Mask - Lightweight, zero-dependency input masking library optimized for React Hook Form.
• Password Toggle - Fully accessible and highly customizable password visibility hook for React.
• Modern Web in 3 Minutes - Master modern web development standards in just 3 minutes.

🚧 Coming Soon

• Start (CLI) - Automated scaffolding tool to initialize and scale high-discipline ViraStack architectures.
• TanStack Boilerplate - Production-ready TanStack Start starter template built with Tailwind CSS 4 and TypeScript.
• Standards - A unified suite of ESLint, Prettier, and architectural rules to enforce absolute code integrity.
• Error Guard - Pro-grade error handling and smart recovery protocols for zero-friction React environments.

... and more at virastack.com

License

Licensed under the MIT License.

Maintainer

A project by Ömer Gülçiçek