Miss any of our Open RFC calls?Watch the recordings here! »

svelte-imask

1.2.0 • Public • Published

svelte-imask

IMask input component and action for Svelte 3. demo

Usage

Install with npm or yarn:

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.

<label>
  <MaskedInput 
    bind:value={tel} 
    options={options} 
    on:complete={complete} 
    name="phone" 
    type="tel"
  />
</label>
 
<script>
  import { MaskedInput } from 'svelte-imask';
 
  const options = {
        mask: '+{7}(000)000-00-00'
  };
  
  let tel;
 
  function complete({ detail: imask }) {
    console.log('completed', imask);
  }
</script> 

OR import imask action to get full control.

<label>
  <input 
    use:imask={options} 
    on:accept={accept} 
    on:complete={complete} 
    name="phone" 
    type="tel"
  >
</label>
 
<script>
  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);
  }
</script> 

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

Keywords

Install

npm i svelte-imask

DownloadsWeekly Downloads

288

Version

1.2.0

License

MIT

Unpacked Size

261 kB

Total Files

8

Last publish

Collaborators

  • avatar