pixel-mask-svelte v1.0.0

Svelte mask library

Tiny (8.5kb) mask library. Supports svelte 4 and svelte 5; Pretty easy to use;

Installation

npm i pixel-mask-svelte

Usage

<script lang="ts">
import {masked} from 'pixel-mask-svelte';
</script>

<input type="text" use:masked={'###-###-###'} />
<input type="text" use:masked={'##.##.####'} />
<input type="text" use:masked={'AAA-###-aaa'} />
<input type="text" use:masked={'+1 (###) ###-####'} />

Custom tokens

<script lang="ts">
	import {masked} from 'pixel-mask-svelte';
	
	const myTokens: {[p: string]: {pattern?: RegExp; escape?: boolean; transform?: (v: string) => string}} = {
        myToken: {escape: true},
        a: {pattern: /[a-zA-Z]/, transform: (v: string) => v.toLocaleLowerCase()},
        '#': {pattern: /\d/}
    };
	
	const maskedCustom = (el: HTMLInputElement, mask: string) => {
		return masked(el, mask, myTokens);
    };
</script>

Patterns