Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/PaulMaly/svelte-imask

IMask input component and action for Svelte 3
https://github.com/PaulMaly/svelte-imask

Last synced: 3 months ago
JSON representation

IMask input component and action for Svelte 3

Awesome Lists containing this project

README

        

# svelte-imask

IMask input component and action for [Svelte 3](https://svelte.dev). [demo](https://svelte.dev/repl/de6a6dcc92ee43d19ad2274599ba34c8?version=3.12.1)

## Usage

Install with npm or yarn:

```bash
npm install --save svelte-imask
```

## Parameters

Any options of imask can be passed to action as options or MaskedComponent via `options` prop.

Then import `MaskedInput` component to your Svelte app. `options` prop will be passed to `imask` action. Any other props will be assigned to input element itself.

```html

import { MaskedInput } from 'svelte-imask';

const options = {
mask: '+{7}(000)000-00-00'
};

let tel;

function complete({ detail: imask }) {
console.log('completed', imask);
}

```

OR import `imask` action to get full control.

```html

import { imask } from 'svelte-imask';

const options = {
mask: '+{7}(000)000-00-00'
};

function accept({ detail: imask }) {
console.log('accepted', imask);
}

function complete({ detail: imask }) {
console.log('completed', imask);
}

```

## Events

- `accept` - event fires on input when the value has changed (imask instance in `event.detail`)
- `complete` - event fires when the value is completely filled (imask instance in `event.detail`)

## License

MIT © [PaulMaly](https://github.com/PaulMaly)