CHECK-MASK-INPUTS

CheckMaskInput is a library for validating and masking user input in various formats, such as CPF, CNPJ, phone numbers, birth dates, and zip codes. It allows you to check if an input value is valid and to mask it with a specified format.

Installation:

Installation can be done using npm or yarn. run the following command: NPM:

1npm install check-mask-input

YARN:

1yarn add check-mask-input

Import:

1
2import { CheckMaskInput } from 'check-mask-input';
3
4or
5
6const { CheckMaskInput } = require('check-mask-input');

INPUT FORMAT FORM

works on any controlled component

1    // React
2    const [cpf, setCPF] = useState('')
3    function handleCPFChange(e: React.ChangeEvent<HTMLInputElement>) {
4        const value = e.target.value
5        const format = CheckMaskInput.cpf(value).getValue()
6        setCPF(format);
7    }
8    function submitExampleFunction() {
9        const checkCPF = CheckMaskInput.cpf(cpf)
10        if(!checkCPF.isValid()){
11            return 'is Invalid CPF'
12        }
13        // send to form
14        checkCPF.getValue()
15        setCPF(format);
16    }
17    <input
18        placeholder="000.000.000-00"
19        value={cpf}
20        onChange={handleCPFChange}
21        className={styles.search}
22        maxLength={14}
23    />
24    <button onClick={() => submitExampleFunction()}>Submit</button>

Usage:

1import { CheckMaskInput } from 'check-mask-input';
2
3
4const CNPJ = CheckMaskInput.cnpj("75114595000105")
5console.log('CNPJ', CNPJ.getValue()) //75.114.595/0001-05
6console.log('CNPJ', CNPJ.isValid())// Output: true
7const PHONE =  CheckMaskInput.phone("1112223333")
8console.log('PHONE', PHONE.getValue()) //Output: (111)222-3333
9console.log('PHONE', PHONE.isValid())// Output: true
10const PHONE_BR =  CheckMaskInput.phoneBR("21996173825")
11console.log('PHONE BR', PHONE_BR.getValue()) // Output: (21)99617-3825
12console.log('PHONE BR', PHONE_BR.isValid()) // Output: true
13const BIRTH = CheckMaskInput.birth("19960107")
14console.log('BIRTH', BIRTH.getValue()) // Output: 1996-01-07
15console.log('BIRTH', BIRTH.isValid()) // Output: true
16const BIRTH_BR = CheckMaskInput.birthBR("07011996")
17console.log('BIRTH BR', BIRTH_BR.getValue()) // Output: 07/01/1996
18console.log('BIRTH BR', BIRTH_BR.isValid()) // Output: true
19const CPF = CheckMaskInput.cpf("14347813058")
20console.log('CPF', CPF.getValue()) // Output: 143.478.130-58
21console.log('CPF', CPF.isValid()) // Output: true
22const CUSTOM = CheckMaskInput.custom("0000000000", "999.99.99.99.9", () => {return true}) //<==== in the custom format you need to define a callback to validate your custom format, since we have no way of knowing which format you expect to receive.
23console.log('CUSTOM', CUSTOM.getValue()) // Output: 000.00.00.00.0
24console.log('CUSTOM', CUSTOM.isValid()) // Output: true
25
26;(async () => {
27    const CEP = CheckMaskInput.cep("22763153") // "22041011" | 22041011
28    console.log('CEP', CEP.getValue()) // Output: 22041-011
29    console.log('CEP', await CEP.isValid()) // Output: true
30    console.log('CEP', CEP.extraData) /* Output: {
31                                            cep: '05010-000',
32                                            uf: 'SP',
33                                            localidade: 'São Paulo',
34                                            bairro: 'Perdizes',
35                                            logradouro: 'Rua Caiubi'
36                                        }*/
37})()

Supported Methods

Feature	Status
cpf	✅
cnpj	✅
phone	✅
phoneBR	✅
birth	✅
birthBR	✅
async cep (using cep-promise)	✅
custom	✅