@signalapp/minimask

@signalapp/minimask

A tiny & modern library for masking inputs.

Install

npm install --save @signalapp/minimask

Usage

Setup an <input>:

<input
	id="creditCardNumber"
	type="text"
	inputmode="numeric"
	autocomplete="cc-number"
	placeholder="1234 1234 1234 1234"
	size="20"
/>

Create a formatter:

export function creditCardNumberFormatter(input) {
	let tokens = []
	let digits = 0

	for (let [index, char] of input.split("").entries()) {
		// skip non-digits
		if (!/\d/.test(char)) {
			continue
		}

		// push digits
		tokens.push({ char, index, mask: false })
		digits++

		// insert spaces when needed
		if (digits === 4 || digits === 8 || digits === 12) {
			tokens.push({ char: " ", index, mask: true })
		}

		// ignore any additional chars
		if (digits >= 16) {
			break
		}
	}

	return tokens
}

Attach the formatter to the input:

import { minimask } from "minimask"
import { creditCardNumberFormatter } from "./formatters"

let input = document.querySelector("#creditCardNumber")

minimask(input, formatter)

License

Copyright 2025 Signal Messenger, LLC

Licensed under the AGPLv3