Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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
- Host: GitHub
- URL: https://github.com/PaulMaly/svelte-imask
- Owner: PaulMaly
- Created: 2019-02-08T05:17:13.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-07-15T16:37:05.000Z (over 2 years ago)
- Last Synced: 2024-03-14T15:49:29.579Z (8 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)