masky-js

1.0.1 • Public • Published

Masky.js

Bundle Size

📦 Masky.js – A compact and high-performance JavaScript library for input masking. Weighing only 1.3 KB (gzip), it’s optimized for fast loading and ideal for any project requiring lightweight, flexible, and customizable input masks.


Features

  • Super Lightweight: Only 1.3 KB gzipped, minimizing your app’s bundle size.
  • Automatic Enhancements:
    • inputmode support: Dynamically adjusts for better mobile user experience.
    • minlength and maxlength: Automatically calculated based on the mask.
  • Built-in Validations: Native support for CPF and CNPJ validation.
  • Flexible Masks: Add custom masks with prefixes, suffixes, and dynamic formatting.
  • Ease of Use: Just add data-mask and optional attributes—Masky.js does the rest.
  • Vanilla JS: Works without any dependencies, making it adaptable to any environment.

Usage

Basic Example

Add data-mask to your input fields, and the library will handle the rest:

<input type="text" data-mask="(00) 00000-0000" />
<script src="dist/masky.min.js"></script>

Adding Prefixes and Suffixes

Add data-mask-prefix or data-mask-suffix to include additional characters:

<input type="text" data-mask="000-000" data-mask-prefix="+55 " data-mask-suffix=" ext" />

Validating CPF and CNPJ

Use data-mask-validation for built-in validation of CPF and CNPJ:

<input type="text" data-mask="000.000.000-00" data-mask-validation="cpf" />
<input type="text" data-mask="00.000.000/0000-00" data-mask-validation="cnpj" />

Available Tokens

Masky.js provides the following tokens for creating masks:

Token Description Example Input Example Mask
0 Numeric digits only 123 000 → 123
A Alphanumeric 1aB AAA → 1AB
S Alphabetic characters abc SSS → abc

Why Masky.js?

  • Automatic Enhancements: Input mode (inputmode) and field limits (minlength and maxlength) are calculated and applied automatically based on the mask.
  • Built for Performance: With only 1.3 KB gzipped, it’s one of the most efficient libraries available.
  • Flexibility: Perfect for any environment—websites, frameworks, or CMS integrations.
  • Ease of Integration: Add data-mask to your inputs, and Masky.js takes care of formatting, validation, and user experience.

Example

<input type="text" data-mask="(00) 00000-0000" />
<input type="text" data-mask="000-000" data-mask-prefix="+55 " data-mask-suffix=" ext" />
<input type="text" data-mask="AAA-SSS-000" />
<script src="dist/masky.min.js"></script>
  • No need to manually define inputmode or limits-—Masky.js handles them automatically.
  • Add as much customization as needed with data-mask-prefix and data-mask-suffix.

Installation

🌐 Via CDN

Use Masky.js directly from a reliable CDN:

jsDelivr

<script src="https://cdn.jsdelivr.net/npm/masky-js/dist/masky.min.js"></script>

UNPKG

<script src="https://unpkg.com/masky-js/dist/masky.min.js"></script>

📦 Via npm

Masky.js is available on npm. Install it using the following command:

npm install masky-js

After installation, include the file in your project:

import 'masky-js/dist/masky.min.js';

📂 Copy the File

For now, download or copy the file directly from the /dist directory of the repository:

  1. Go to the /dist folder in this repository.
  2. Download or copy the masky.min.js file.
  3. Include it in your project:
<script src="path/to/masky.min.js"></script>

Contributing

We welcome contributions! Fork the repository, create a branch, and open a pull request.

License

This project is licensed under the MIT License.

Package Sidebar

Install

npm i masky-js

Weekly Downloads

2

Version

1.0.1

License

MIT

Unpacked Size

8.81 kB

Total Files

4

Last publish

Collaborators

  • eduardovillao