simple-mask-text

This is a simple masked text (normal text and input text).

Install

npm i simple-mask-text

or

yarn add simple-mask-text

Usage (SimpleMask)

For all the masks you will use in this way:

Cel Phone

Mask:

• BRL (default): (99) 9999-9999 or (99) 99999-9999 (will detect automatically)
• INTERNATIONAL: +999 999 999 999

import SimpleMask from 'simple-mask-text';

SimpleMask.toMask('cel-phone', '11234567890', {
    maskType: 'BRL',
    withDDD: true,
    dddMask: '(99) '
})

// return "(11) 23456-7890"


SimpleMask.toMask('cel-phone', '555555555555', {
  maskType: 'INTERNATIONAL',
})

// return "+555 555 555 555"


/*REVERT TO ORIGINAL VALUE*/
SimpleMask.toRawValue('cel-phone', '(11) 23456-7890')

// return "11234567890"

Options

| name | type | required | default | description | | ---------- | ------- | -------- | ------- | ----------- | | maskType | string | no | maskType | the type of the mask to use. Available: BRL or INTERNATIONAL | | withDDD | boolean | no | true | if the mask type is BRL, include the DDD | | dddMask | string | no | (99) | if the mask type is BRL, the DDD mask |

CPF

Mask: 999.999.999-99

import SimpleMask from 'simple-mask-text';

SimpleMask.toMask('cpf', '26859785854')

//return "268.597.858-54"


/*REVERT TO ORIGINAL VALUE*/
SimpleMask.toRawValue('cpf', '268.597.858-54')

// return "26859785854"

CNPJ

Mask: 99.999.999/9999-99

import SimpleMask from 'simple-mask-text';

SimpleMask.toMask('cnpj', '52541236000189')

//return "52.541.236.0001-89"


/*REVERT TO ORIGINAL VALUE*/
SimpleMask.toRawValue('cnpj', '52.541.236.0001-89')

// return "52541236000189"

Credit Card

Mask:

• visa or master: 9999 9999 9999 9999 or 9999 **** **** 9999 (obfuscated)
• amex: 9999 999999 99999 or 9999 ****** 99999 (obfuscated)
• diners: 9999 999999 9999 or 9999 ****** 9999 (obfuscated)

import SimpleMask from 'simple-mask-text';

SimpleMask.toMask('credit-card', '999999999999999', {
  obfuscated: true
})

// return "9999 **** **** 9999"


SimpleMask.toMask('credit-card', '999999999999999', {
  obfuscated: false
})

// return "9999 9999 9999 9999"


/*REVERT TO ORIGINAL VALUE*/
SimpleMask.toRawValue('credit-card', '9999 9999 9999 9999')

// return [ '999', '999', '999', '999', '999' ] {array}

Options

| name | type | required | default | description | | ---------- | ------- | -------- | -------------------- | ----------- | | obfuscated | boolean | no | false | if the mask should be obfuscated or not| | issuer | string | no | visa-or-mastercard | the type of the card mask. The options are: visa-or-mastercard, amex or diners |

Custom

Mask: defined by pattern

• 9 - accept digit.
• A - accept alpha.
• S - accept alphanumeric.
• * - accept all, EXCEPT white space.

Ex: AAA-9999

import SimpleMask from 'simple-mask-text';

SimpleMask.toMask('custom', '123456', {
  /**
   * mask: (String | required | default '')
   * the mask pattern
   * 9 - accept digit.
   * A - accept alpha.
   * S - accept alphanumeric.
   * * - accept all, EXCEPT white space.
  */
    mask: '999 - 999'
})

// return "123 - 456"

Options

| name | type | required | default | description | | ---------- | ------- | -------- | -------------------- | ----------- | | mask | string | YES | | The mask pattern |

Money

Mask: R$ 999,99 (fully customizable)

import SimpleMask from 'simple-mask-text';

SimpleMask.toMask('money', parseFloat('100.5'), {
    precision: 2,
    separator: ',',
    delimiter: '.',
    unit: 'R$ ',
    suffixUnit: ''
})

// return "R$ 100,50"


/*REVERT TO ORIGINAL VALUE*/
SimpleMask.toRawValue('money', 'R$ 100,50')

// return 100.5 {number}

Options

| name | type | required | default | description | | ---------- | ------- | -------- | -------------------- | ----------- | | precision | number | no | 2 | The number of cents to show | | separator | string | no | , | The cents separator | | delimiter | string | no | . | The thousand separator | | unit | string | no | R$ | The prefix text | | suffixUnit | string | no | '' | The sufix text |

Only Numbers

Mask: accept only numbers

import SimpleMask from 'simple-mask-text';

SimpleMask.toMask('only-numbers', 'AAL 36789 18900 0190')

// return "36789189000190"

Zip Code

Mask: 99999-999

import SimpleMask from 'simple-mask-text';

SimpleMask.toMask('zip-code', '08150000')

// return "08150-000"


/*REVERT TO ORIGINAL VALUE*/
SimpleMask.toRawValue('zip-code', '08150-000')

// return "08150000"

Thanks to

• Thanks to Ben-hur Santos Ott =).
• Thanks to vanilla-masker =).