maska/docs/v3/svelte.md

Usage with Svelte

Installation

You can install Maska with following command:

npm install @maskajs/svelte@3

And then use it in your .svelte component:

import { maska } from '@maskajs/svelte'

<input use:maska data-maska="#-#" />

Action signature

Maska provides simple Svelte action for use with input:

<input use:maska={options}>

• options is object with default options

Minimal example

Apply maska action to the input along with data-maska attribite:

<script>
import { maska } from '@maskajs/svelte'
</script>

<input use:maska data-maska="#-#">

Set mask options

To set default options for the mask, pass options via directive value:

<script>
import { maska } from '@maskajs/svelte'

const options = {
  mask: "#-#",
  eager: true
}
</script>

<input use:maska={options} data-maska-reversed>

You can override default options with data-maska- attributes on the input. In the example above we set eager mode using options and reversed mode using data-maska-reversed attribute.