Cross-Framework Input Masking Library – Maskfy.js

Preview:

Description:

Maskfy is a lightweight JavaScript input masking library that transforms raw user input into formatted strings according to predefined patterns.

Features:

• Tiny footprint (1kb gzipped) with zero dependencies
• Compatible with React, Vanilla JS, and more
• Customizable mask patterns with built-in and custom character types
• Reverse masking support for currency formatting
• Prefix and suffix options for units and symbols

Use Cases

• Phone Number Formatting: Automatically format phone inputs as users type.
• Currency Values: Apply locale-specific formatting to monetary values with reverse masking and prefix/suffix support.
• Document Numbers: Format tax IDs, license plates, and other document numbers with country-specific patterns.
• Custom Formats: Create specialized masks for industry-specific formats like product codes, reference numbers, or scientific notation.

How to use it:

1. Install maskfy and import it into your project.

# Yarn
$ yarn add maskfy
# NPM
$ npm install maskfy

import { maskfy } from 'maskfy';

2. Call the maskfy function, specify the input character, and define the mask pattern as follows:

const rawValue = '1234567890';
const options = { mask: '(99) 9999-9999' };
const maskedValue = maskfy(rawValue, options);
console.log(maskedValue); // Output: (12) 3456-7890

3. More configuration options:

• reverse: Boolean to apply mask from right to left (default: false)
• keybind: Object mapping characters to RegExp patterns
• prefix: String added before the masked value
• suffix: String added after the masked value

const options = { 
  reverse: false,
  Prefix: '',
  Suffix: '',
  Keybind: { A: /[A-Za-z]/, 9: /\d/, '?': /./ },
};

Changelog:

v3.1.4 (05/21/2025)

• Maskfyfeat: Add increment keybind to maskfySettings