{"id":13407735,"url":"https://github.com/xnimorz/svelte-input-mask","last_synced_at":"2025-04-06T06:13:10.684Z","repository":{"id":40921684,"uuid":"213658928","full_name":"xnimorz/svelte-input-mask","owner":"xnimorz","description":"Input masking component for Svelte with simple API and rich customization","archived":false,"fork":false,"pushed_at":"2024-11-20T12:29:57.000Z","size":275,"stargazers_count":106,"open_issues_count":8,"forks_count":10,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-30T05:08:11.757Z","etag":null,"topics":["credit-card","custom-mask","date-input","input","input-formatting","mask","number-input","svelte","svelte-component","svelte-input","svelte-input-mask","svelte-mask"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/svelte-input-mask-demo-xurgr","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xnimorz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-10-08T14:04:05.000Z","updated_at":"2025-01-21T12:31:57.000Z","dependencies_parsed_at":"2024-04-09T01:49:33.098Z","dependency_job_id":"026bfc4b-42c8-4f9f-adce-b380a3678f51","html_url":"https://github.com/xnimorz/svelte-input-mask","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xnimorz%2Fsvelte-input-mask","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xnimorz%2Fsvelte-input-mask/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xnimorz%2Fsvelte-input-mask/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xnimorz%2Fsvelte-input-mask/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xnimorz","download_url":"https://codeload.github.com/xnimorz/svelte-input-mask/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247441059,"owners_count":20939239,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["credit-card","custom-mask","date-input","input","input-formatting","mask","number-input","svelte","svelte-component","svelte-input","svelte-input-mask","svelte-mask"],"created_at":"2024-07-30T20:00:48.291Z","updated_at":"2025-04-06T06:13:10.656Z","avatar_url":"https://github.com/xnimorz.png","language":"Svelte","funding_links":[],"categories":["Svelte","UI Componentes"],"sub_categories":["Components","Comunidade Global"],"readme":"## Mask input with simple API and rich customization.\n\nIf you need to create an input for:\n\n- credit card\n- phone number\n- date\n- birthday\n- numbers\n- Or other custom mask\n\nThis project could help you in all this situations!\n\nTake a look at our demos: https://codesandbox.io/s/svelte-input-mask-demo-xurgr\n\n### How to use it:\n\nInstall it:\n\n```\nnpm install --save svelte-input-mask\n```\n\nor if you're using yarn:\n\n```\nyarn add svelte-input-mask\n```\n\nImport `MaskInput` component:\n\n```js\nimport MaskInput from \"svelte-input-mask/MaskInput.svelte\";\n```\n\nUse it (for example for CreditCard):\n\n```js\n\u003cMaskInput alwaysShowMask maskChar=\"_\" mask=\"0000-000000-00000\" /\u003e\n```\n\nAdd event listeners:\n\n```js\n\u003cscript\u003e\n  import MaskInput from 'svelte-input-mask/MaskInput.svelte';\n\n  let mask = '0000-0000-0000-0000';\n\n  const handleChange = ({ detail }) =\u003e {\n    console.log(detail.inputState.maskedValue); // stores the value of input\n\n    if (detail.inputState.maskedValue.indexOf('34') === 0 || detail.inputState.maskedValue.indexOf('37') === 0) {\n      mask = '0000-000000-00000';\n      return;\n    }\n\n    mask = '0000-0000-0000-0000';\n  };\n\u003c/script\u003e\n\n\u003cMaskInput alwaysShowMask maskChar=\"_\" {mask} on:change={handleChange} /\u003e\n```\n\nCongrats! You made the first masked input :)\n\nCheckout more usecases here: https://codesandbox.io/s/romantic-franklin-xurgr\n\n### Where to use?\n\nCredit cards:\n\n```js\n\u003cMaskInput alwaysShowMask maskChar=\"_\" mask=\"0000-000000-00000\" /\u003e\n```\n\nPhones (you still can change prefixes, country code like in credit card example):\n\n```js\n\u003cMaskInput\n  alwaysShowMask\n  mask=\"+1 (000) 000 - 0000\"\n  size={20}\n  showMask\n  maskChar=\"_\"\n/\u003e\n```\n\nDates:\n\n```js\n\u003cscript\u003e\n  import MaskInput from 'svelte-input-mask/MaskInput.svelte';\n\n  let maskString = 'DD.MM.YYYY';\n  let mask = '00.00.0000';\n\n  const handleChange = ({ detail }) =\u003e {\n    const value = detail.inputState.maskedValue;\n    if (parseInt(value[6], 10) \u003e 2) {\n      maskString = 'DD.MM.YY';\n      mask = '00.00.00';\n    } else {\n      maskString = 'DD.MM.YYYY';\n      mask = '00.00.0000';\n    }\n  };\n\u003c/script\u003e\n\n\u003cMaskInput alwaysShowMask {maskString} {mask} on:change={handleChange}/\u003e\n```\n\nNumbers:\n\n```js\n\u003cscript\u003e\n  import NumberInput from 'svelte-input-mask/NumberInput.svelte';\n\u003c/script\u003e\n\n\u003cNumberInput /\u003e\n```\n\n### Which props it has?\n\nMask input has next props:\n\n| Prop           | Default value | Description                                                                                                                                                                                            |\n| -------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| value          | -             | The value of the input. Will be processed to masked one. In this case you can control the value of the component                                                                                       |\n| defaultValue   | -             | The default value of the input. Will be applied only during the first render                                                                                                                           |\n| maskString     | -             | The mask string to show if there are no filled chars. It's length should be the same as `mask`. Example: `'DD.MM.YYYY'`                                                                                |\n| maskChar       | ''            | In case you don't need a custom string you can define only a definite char for mask. Example: `maskChar = '_'` and `mask = '0000-0000-0000-0000'` will give: `____-____-____-____`                     |\n| mask           | -             | The mask of the input. Could be a credit card: `'0000-0000-0000-0000'`, date: `00.00.0000` or whatever you want :) Doesn't work if `reformat` prop is setted                                           |\n| maskFormat     | regexp        | The regexp for custom formatting. You may use it if you want to define a specific mask. See example here: https://github.com/xnimorz/masked-input/blob/master/packages/input-core/src/index.ts#L16-L28 |\n| alwaysShowMask | false         | Flag to show the mask                                                                                                                                                                                  |\n| showMask       | false         | Show mask if there is any data in input                                                                                                                                                                |\n| reformat       | -             | The function, which defines a custom formatting rules. In case if you can't describe the format only with mask (e.g. numbers). If you use this prop `mask` prop will be ignored                        |\n\nSvelte mask input pass all props that it doesn't handle right to `input` html element.\n\n### Quick start examples at local machine\n\n```\ngit clone git@github.com:xnimorz/svelte-input-mask.git\ncd svelte-input-mask/example\nyarn install\nyarn dev\n```\n\n### Requirements:\n\nSvelte should be installed in your project. Check the minimal Svelte version here: https://github.com/xnimorz/svelte-input-mask/blob/master/package.json#L42\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxnimorz%2Fsvelte-input-mask","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxnimorz%2Fsvelte-input-mask","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxnimorz%2Fsvelte-input-mask/lists"}