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

---

Read the full documentation →

Why ViraStack Mask?

• Ultra-lightweight: Less than 5KB minified & zipped, minimizing your bundle size.
• React-First: Seamless integration with React Hook Form, eliminating state synchronization issues.
• Type-Safe: Built with TypeScript for an excellent developer experience and robust autocompletion.
• Smart Presets: Built-in masks for credit cards, phones, currency, and more, saving you development time.

Quick Start

npm install @virastack/mask

import { useForm } from 'react-hook-form';
import { useViraMask } from '@virastack/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

Discover all ViraStack tools, libraries, and boilerplates at virastack.com.

License

Licensed under the MIT License.

Maintainer

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