Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/xnimorz/svelte-input-mask
Input masking component for Svelte with simple API and rich customization
https://github.com/xnimorz/svelte-input-mask
credit-card custom-mask date-input input input-formatting mask number-input svelte svelte-component svelte-input svelte-input-mask svelte-mask
Last synced: 18 days ago
JSON representation
Input masking component for Svelte with simple API and rich customization
- Host: GitHub
- URL: https://github.com/xnimorz/svelte-input-mask
- Owner: xnimorz
- Created: 2019-10-08T14:04:05.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-10-06T18:58:08.000Z (2 months ago)
- Last Synced: 2024-11-17T04:05:04.967Z (26 days ago)
- Topics: credit-card, custom-mask, date-input, input, input-formatting, mask, number-input, svelte, svelte-component, svelte-input, svelte-input-mask, svelte-mask
- Language: Svelte
- Homepage: https://codesandbox.io/s/svelte-input-mask-demo-xurgr
- Size: 254 KB
- Stars: 102
- Watchers: 6
- Forks: 10
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-svelte - Svelte Input Mask - Insere máscara de data nos campos de texto. (UI Componentes / Comunidade Global)
README
## Mask input with simple API and rich customization.
If you need to create an input for:
- credit card
- phone number
- date
- birthday
- numbers
- Or other custom mask
This project could help you in all this situations!
Take a look at our demos: https://codesandbox.io/s/svelte-input-mask-demo-xurgr
### How to use it:
Install it:
```
npm install --save svelte-input-mask
```
or if you're using yarn:
```
yarn add svelte-input-mask
```
Import `MaskInput` component:
```js
import MaskInput from "svelte-input-mask/MaskInput.svelte";
```
Use it (for example for CreditCard):
```js
```
Add event listeners:
```js
import MaskInput from 'svelte-input-mask/MaskInput.svelte';
let mask = '0000-0000-0000-0000';
const handleChange = ({ detail }) => {
console.log(detail.inputState.maskedValue); // stores the value of input
if (detail.inputState.maskedValue.indexOf('34') === 0 || detail.inputState.maskedValue.indexOf('37') === 0) {
mask = '0000-000000-00000';
return;
}
mask = '0000-0000-0000-0000';
};
```
Congrats! You made the first masked input :)
Checkout more usecases here: https://codesandbox.io/s/romantic-franklin-xurgr
### Where to use?
Credit cards:
```js
```
Phones (you still can change prefixes, country code like in credit card example):
```js
```
Dates:
```js
import MaskInput from 'svelte-input-mask/MaskInput.svelte';
let maskString = 'DD.MM.YYYY';
let mask = '00.00.0000';
const handleChange = ({ detail }) => {
const value = detail.inputState.maskedValue;
if (parseInt(value[6], 10) > 2) {
maskString = 'DD.MM.YY';
mask = '00.00.00';
} else {
maskString = 'DD.MM.YYYY';
mask = '00.00.0000';
}
};
```
Numbers:
```js
import NumberInput from 'svelte-input-mask/NumberInput.svelte';
```
### Which props it has?
Mask input has next props:
| Prop | Default value | Description |
| -------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| value | - | The value of the input. Will be processed to masked one. In this case you can control the value of the component |
| defaultValue | - | The default value of the input. Will be applied only during the first render |
| 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'` |
| 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: `____-____-____-____` |
| 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 |
| 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 |
| alwaysShowMask | false | Flag to show the mask |
| showMask | false | Show mask if there is any data in input |
| 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 |
Svelte mask input pass all props that it doesn't handle right to `input` html element.
### Quick start examples at local machine
```
git clone [email protected]:xnimorz/svelte-input-mask.git
cd svelte-input-mask/example
yarn install
yarn dev
```
### Requirements:
Svelte should be installed in your project. Check the minimal Svelte version here: https://github.com/xnimorz/svelte-input-mask/blob/master/package.json#L42