The npm package to mask and format fields.
This package allows you to format string data in standard formats such as the examples below.
- CPF Brazillian Document - 12345678900 → 123.456.789.00
- Telephone Number - 85123457890 → (85)12345-7890
- Brazillian Postal Code - 12355201 → 12.355-201
- CNPJ Brazillian Document - 12345678123400 → 12.345.678/1234-00
- Credit Card - 1234567832166547 → 1234.5678.3216.6547
- Brazillian General Document - 12345678901 → 1234567890-1
- Date - 02082019 → 02/08/2019
- Money - 1000 → 1,000...
- Only numbers filter mask, don't allow non-numeric characters.
- No latin letters → Permissives [123,.-=+...] ← No letters
- Only letters [abcDEF...]
To install the package run npm install --save @jsdaniell/mask-fields
on terminal inside your project.
- First, import the package on your project:
import format from "@jsdaniell/mask-fields";
- Then you can use the mask on any local that's shows data.
Example of use on React component:
<TextField
fullWidth
value={format.tel("85012346789")}
onChange={event => {
let value = format.num(event.target.value); // Reformat value for only numbers to treat the number.
onChange(value);
}}
variant="outlined"
label="Valor"
/>
The result will be → (85)01234-6789
Remember to use format.num(event.target.value)
on onChange event of TextField or any component that you're using to reformat the string to numbers again when passing value on onChange
event, or format.onlyLetters(event.target.value)
to reformat to only latin characters string.
It's not required that the value passed have to be a string.
format.cpf(); // Brazillian CPF Document
format.tel(); // Phone Number
format.cep(); // Brazillian Postal Code
format.cnpj(); // Brazillian Juridic Person Document
format.card(); // Credit Card
format.rg(); // Brazillian General Document
format.date(); // Date Time format
format.money(); // Money format
format.noLetters(); // No letter characters allowed
format.onlyLetters(); // Only letters characters are returned