v4 apha is here — 95% smaller, rewritten from scratch

[eduardoborges]

hey everyone,

v4 of use-mask-input is out — and it's not just an update.
a complete rewrite with a focus on bundle size, simplicity, and developer experience.
i’ve spent the past few weeks fully rewriting the library from scratch.

why? the previous version had grown too complex, with unnecessary weight and limited flexibility.
this rewrite felt like the right move to unlock a much leaner and more modern core.

---

⚖️ before vs after

version	bundle	minified	gzipped
v3	119.7 kB	35.4 kB	—
v4	3.5 kB	1.6 kB	✅

→ that’s ~97% smaller, with zero dependencies

---

✨ what’s new

• 🔄 full rewrite using functional core / imperative shell
• 🧩 unified mask() API supporting multiple patterns
• 🧠 declarative pattern syntax:
  999.999.999-99, AAA-999, *{4}, [9{2}], currency, decimal
• 🧼 native bind() with smart cursor and backspace behavior
• 💰 built-in support for currency and decimal formatting
• 🧃 smoother DX and easier to extend

---

🔌 wrappers

• ✅ vanilla (plain HTML inputs)
• ⚛️ react & react-hook-form (via withMask HOC & useMaskedResgister)
• 🍍 vue 3 (planned)

---

📦 install

npm install use-mask-input@alpha

// vanila
import { mask } from 'use-mask-input';

mask('999.999.999-99').bind(input);
mask(['999.999.999-99', '99.999.999/9999-99']).bind(input);

//react
import { withMask } from 'use-mask-input/react';

...
<input ref={withMask('AAAA-9999') />

---

📍 use-mask-input – roadmap

ongoing roadmap for use-mask-input.
feel free to open ideas, issues or PRs — contributions welcome!

---

🚧 in progress – v4.0.0-alpha

• full rewrite using functional core / imperative shell
• new lightweight pattern parser
• zero dependencies
• bundle size: ~2 kB gzipped max
• unified mask() API with support for multiple patterns
• support for currency, decimal, optional tokens, repetitions
• native bind() with smart backspace + cursor
• react HOC: withMask
• improved DX and structure for extension
• initial preset system (cpf, cnpj, phone, email, money, decimal)
• react-hook-form adapter

---

🔜 planned – v4.1.0

• async masking / async validation (e.g. CEP → address)
• vue 3 wrapper
• unmask() and isComplete() helpers
• better type inference & DX

---

🧪 ideas for v4.2+

• conditional patterns (ex: prefix-based formatting)
• international presets (US SSN, EU VAT, phone masks, etc)
• CLI dev tool to test masks locally
• interactive playground / docs site

---

🤝 want to contribute?

• open an issue
• suggest a feature
• help with wrappers, docs, presets or DX

thanks for being part of it!