https://github.com/holasoycael/make-mask
👺✨ Biblioteca para criar mascaras de texto em Java Script moderno.
https://github.com/holasoycael/make-mask
formatter input javascript-library mask text typescript utilities
Last synced: 8 months ago
JSON representation
👺✨ Biblioteca para criar mascaras de texto em Java Script moderno.
- Host: GitHub
- URL: https://github.com/holasoycael/make-mask
- Owner: holasoycael
- License: mit
- Created: 2023-10-16T02:24:52.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-11-06T02:34:13.000Z (over 2 years ago)
- Last Synced: 2025-04-11T21:07:28.327Z (about 1 year ago)
- Topics: formatter, input, javascript-library, mask, text, typescript, utilities
- Language: TypeScript
- Homepage:
- Size: 41 KB
- Stars: 14
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# `Make Mask`
[](https://www.npmjs.com/package/make-mask)
[](https://coveralls.io/github/holasoycael/make-mask?branch=main)
[](https://www.npmjs.com/package/make-mask)
[](https://unpkg.com/make-mask/dist/make.min.js)
`make-mask` is a lightweight javascript library of approximately 1kb for working with text masks. It was built to solve problems mainly in HTML inputs with javascript free from any other library. It was designed to solve inputs, but it is also valid when used to print texts in a simple and objective way. I guarantee a secure library covered with tests and open source!
It is very simple to use to create masks using the patterns below:
`0` — Digits
Only numbers
`9` — Optional digits
Indicates whether there will be a number or not
`#` — Recursive digits
Use this pattern to create infinitely repeatable formulas
`A` — Letters and numbers
Uppercase, lowercase letters and numbers
`S` — Letters
Uppercase, lowercase letters
## Installing
Using npm:
```sh
npm install make-mask
```
Using yarn:
```sh
yarn add make-mask
```
Using jsDelivr CDN:
```html
```
Using unpkg CDN:
```html
```
## Usage
* [Vanilla JS](https://stackblitz.com/edit/vanillajs-make-mask) → [Preview](https://vanillajs-make-mask.stackblitz.io/)
* [React](https://stackblitz.com/edit/react-make-mask) → [Preview](https://react-make-mask.stackblitz.io/)
#
### Default function arguments
It's very simple to use!
```ts
import mask from 'make-mask'
mask('12345678', '00000-000') // => 12345-678
```
Type information about the function
```ts
/**
* Returns the transformed value
* @param {string} value original value
* @param {string} mask syntax pattern
* @param {object} options options object
* @return {string} mask result
*/
fn(value, mask[ , options])
```
### Most common examples
### `Date `
```js
mask('27101', '00/00/0000') // => 27/10/1
mask('271018', '00/00/0000') // => 27/10/18
mask('2710182', '00/00/0000') // => 27/10/182
mask('27101820', '00/00/0000') // => 27/10/1820
```
### `Hour`
```js
mask('203', '00:00:00') // => 20:3
mask('2039', '00:00:00') // => 20:39
mask('20392', '00:00:00') // => 20:39:2
mask('203922', '00:00:00') // => 20:39:22
```
### `ZIP Code`
```js
mask('01310', '00000-000') // => 01310
mask('013109', '00000-000') // => 01310-9
mask('0131093', '00000-000') // => 01310-93
mask('01310930', '00000-000') // => 01310-930
```
### `Money`
```js
const options = { reverse: true }
mask('6689', '#.##0,00', options) // => 66,89
mask('66899', '#.##0,00', options) // => 668,99
mask('668993', '#.##0,00', options) // => 6.689,93
mask('6689932', '#.##0,00', options) // => 66.899,32
```
### `Telephone with DDD`
```js
const m = '(00) 0000-0000'
mask('11994132', m) // => (11) 9413-2
mask('119941325', m) // => (11) 9413-25
mask('1199413256', m) // => (11) 9413-256
mask('11994132568', m) // => (11) 9413-2568
```
### `CPF`
```js
const options = { reverse: true }
const m = '000.000.000-00'
mask('6698', m, options) // => 66-98
mask('66980', m, options) // => 669-80
mask('669809', m, options) // => 6.698-09
mask('6698090', m, options) // => 66.980-90
```
### `CNPJ`
```js
const options = { reverse: true }
const m = '00.000.000/0000-00'
mask('0000', m, options) // => 00-00
mask('00001', m, options) // => 000-01
mask('000016', m, options) // => 0000-16
mask('0000168', m, options) // => 0/0001-68
```
### `IP Address`
```js
const m = '099.099.099.099'
mask('255255', m) // => 255.255
mask('25525525', m) // => 255.255.25
mask('2552552552', m) // => 255.255.255.2
mask('255255255255', m) // => 255.255.255.255
```
### We recommended for you
Maybe when working with price values directly in inputs, this library is not suitable for your needs. And we recommend exploring the [make-currency](https://www.npmjs.com/package/make-currency) library!
### License
[MIT](/license)