{"library":"maska","title":"Maska: Input Mask","description":"Maska is a lightweight, zero-dependency JavaScript library for creating input masks, supporting Vanilla JS, Vue (2 and 3), Alpine.js, and Svelte. The current stable version is 3.2.0, with ongoing maintenance and minor releases following a significant v3.0.0 rewrite. Key differentiators include its minimal footprint (~3 Kb gzipped), comprehensive framework integrations, and advanced masking features such as custom tokens with modifiers and transform functions, hooks, and a dedicated number mask mode for simplified currency and numerical formatting. It also supports dynamic, reversed, and eager masks, providing robust solutions for various input validation scenarios.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install maska"],"cli":null},"imports":["import { Maska } from 'maska'","import { vMaska } from 'maska/vue';\n\n// In Vue component setup:\ndirectives: { maska: vMaska }","import { type MaskaDetail } from 'maska'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Maska Quickstart</title>\n</head>\n<body>\n  <label for=\"phone-input\">Phone Number (US):</label>\n  <input type=\"text\" id=\"phone-input\" placeholder=\"+1 (___) ___-____\" />\n\n  <label for=\"currency-input\">Currency ($):</label>\n  <input type=\"text\" id=\"currency-input\" placeholder=\"$__.__\" />\n\n  <script type=\"module\">\n    import { Maska } from 'maska';\n\n    document.addEventListener('DOMContentLoaded', () => {\n      // Example 1: Phone number mask\n      const phoneInput = document.getElementById('phone-input');\n      const phoneMask = new Maska(phoneInput, {\n        mask: '+1 (###) ###-####',\n        tokens: {\n          '#': { pattern: /\\d/ }\n        }\n      });\n\n      phoneInput.addEventListener('input', () => {\n        console.log('Phone - Unmasked:', phoneMask.unmasked, 'Completed:', phoneMask.completed);\n      });\n\n      // Example 2: Currency mask\n      const currencyInput = document.getElementById('currency-input');\n      const currencyMask = new Maska(currencyInput, {\n        mask: '$###,###,###.##', // Example for up to millions, two decimal places\n        reversed: true,\n        tokens: {\n          '#': { pattern: /\\d/, multiple: true }\n        }\n      });\n\n      currencyInput.addEventListener('input', () => {\n        console.log('Currency - Masked:', currencyMask.masked, 'Unmasked:', currencyMask.unmasked);\n      });\n    });\n  </script>\n</body>\n</html>","lang":"html","description":"Demonstrates basic Maska usage for Vanilla JavaScript, applying a phone number mask and a reversed currency mask to input fields. It shows how to initialize Maska, define masks and tokens, and access masked/unmasked values and completion status.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}