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