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

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

Last synced: about 2 months ago
JSON representation

IMask input component and action for Svelte 3

• Host: GitHub
• URL: https://github.com/PaulMaly/svelte-imask
• Owner: PaulMaly
• Created: 2019-02-08T05:17:13.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-07-15T16:37:05.000Z (about 2 years ago)
• Last Synced: 2024-03-14T15:49:29.579Z (6 months ago)
• Language: JavaScript
• Homepage:
• Size: 161 KB
• Stars: 64
• Watchers: 2
• Forks: 0
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

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)