https://github.com/eduardovillao/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.
https://github.com/eduardovillao/masky-js
cpf-cnpj-validation form-validation input-mask javascript mask
Last synced: over 1 year ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/eduardovillao/masky-js
- Owner: eduardovillao
- License: mit
- Created: 2025-01-17T22:56:58.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-20T18:34:22.000Z (over 1 year ago)
- Last Synced: 2025-03-29T00:51:10.360Z (over 1 year ago)
- Topics: cpf-cnpj-validation, form-validation, input-mask, javascript, mask
- Language: JavaScript
- Homepage:
- Size: 15.6 KB
- Stars: 6
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Masky.js
[](https://bundlephobia.com/package/masky-js)
📦 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:
```html
```
**Adding Prefixes and Suffixes**
Add data-mask-prefix or data-mask-suffix to include additional characters:
```html
```
**Validating CPF and CNPJ**
Use data-mask-validation for built-in validation of CPF and CNPJ:
```html
```
## 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
```html
```
- 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
```html
```
UNPKG
```html
```
### 📦 Via npm
Masky.js is available on npm. Install it using the following command:
```bash
npm install masky-js
```
After installation, include the file in your project:
```js
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:
```html
```
## Contributing
We welcome contributions! Fork the repository, create a branch, and open a pull request.
## License
This project is licensed under the [MIT License](https://mit-license.org/).