@signalapp/minimask/README.md

Simple HTML input masking

# @signalapp/minimask

> A tiny & modern library for masking inputs.

## Install

```sh
npm install --save @signalapp/minimask
```

## Usage

Setup an `<input>`:

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

Create a formatter:

```js
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:

```js
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](LICENSE)