svelte-maskify

svelte-maskify is a action wrapper for AlpineJS masks.

To get started install the package with your favorite package manager:

npm i svelte-maskify

pnpm i svelte-maskify

yarn i svelte-maskify

bun i svelte-maskify

Usage

Importing svelte-maskify:

import { maskify } from 'svelte-maskify';

The svelte-maskify API is very simular to AlpineJS's API, the difference is that instead of passing the mask as a data-attribute (x-mask) svelte-maskify uses the action parameters to pass in the mask.

- <input x-mask="99/99/99" />
+ <input use:maskify={"99/99/99"} />

Note: This also allows for you to update the mask by chaning the passed in param, identical to AlpineJS's dynamic masks.

If you have any further questions about constructing masks and how they work you can visit the AlpineJS docs.

Limitiations

svelte-maskify currently does not support money formatting like AlpineJS does, this is planned to be added in the future though!