Socket
Socket
Sign inDemoInstall

react-native-mask-input

Package Overview
Dependencies
514
Maintainers
1
Versions
12
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.0.1 to 1.0.2

47

lib/commonjs/Masks.js

@@ -12,20 +12,37 @@ "use strict";

const BRL_CAR_PLATE = [/[a-zA-Z]/, /[a-zA-Z]/, /[a-zA-Z]/, '-', /\d/, /\w/, /\d/, /\d/];
const BRL_CNPJ = [/\d/, /\d/, '.', /\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/];
const BRL_CPF = [/\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, '-', /\d/, /\d/];
const BRL_CPF_CNPJ = text => {
const rawValue = (text === null || text === void 0 ? void 0 : text.replace(/\D+/g, '')) || '';
return rawValue.length <= 11 ? BRL_CPF : BRL_CNPJ;
};
const BRL_CURRENCY = (0, _createNumberMask.default)({
prefix: ['R', '$', ' '],
separator: ',',
delimiter: '.',
precision: 2
});
const BRL_PHONE = ['(', /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/];
const CREDIT_CARD = [/\d/, /\d/, /\d/, /\d/, ' ', [/\d/], [/\d/], [/\d/], [/\d/], ' ', [/\d/], [/\d/], [/\d/], [/\d/], ' ', /\d/, /\d/, /\d/, /\d/];
const DATE_DDMMYYYY = [/[0-3]/, /\d/, '/', /[0-1]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/];
const DATE_MMDDYYYY = [/[0-1]/, /\d/, '/', /[0-3]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/];
const DATE_YYYYMMDD = [/\d/, /\d/, /\d/, /\d/, '/', /[0-1]/, /\d/, '/', /[0-3]/, /\d/];
const ZIP_CODE = [/\d/, /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/];
var _default = {
BRL_CAR_PLATE: [/[a-zA-Z]/, /[a-zA-Z]/, /[a-zA-Z]/, '-', /\d/, /\w/, /\d/, /\d/],
BRL_CNPJ: [/\d/, /\d/, '.', /\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/],
BRL_CPF: [/\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, '-', /\d/, /\d/],
BRL_CURRENCY: (0, _createNumberMask.default)({
prefix: ['R', '$', ' '],
separator: ',',
delimiter: '.',
precision: 2
}),
BRL_PHONE: ['(', /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
CREDIT_CARD: [/\d/, /\d/, /\d/, /\d/, ' ', [/\d/], [/\d/], [/\d/], [/\d/], ' ', [/\d/], [/\d/], [/\d/], [/\d/], ' ', /\d/, /\d/, /\d/, /\d/],
DATE_DDMMYYYY: [/[0-3]/, /\d/, '/', /[0-1]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
DATE_MMDDYYYY: [/[0-1]/, /\d/, '/', /[0-3]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
DATE_YYYYMMDD: [/\d/, /\d/, /\d/, /\d/, '/', /[0-1]/, /\d/, '/', /[0-3]/, /\d/],
ZIP_CODE: [/\d/, /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/]
BRL_CAR_PLATE,
BRL_CNPJ,
BRL_CPF,
BRL_CPF_CNPJ,
BRL_CURRENCY,
BRL_PHONE,
CREDIT_CARD,
DATE_DDMMYYYY,
DATE_MMDDYYYY,
DATE_YYYYMMDD,
ZIP_CODE
};
exports.default = _default;
//# sourceMappingURL=Masks.js.map

47

lib/module/Masks.js
import createNumberMask from './createNumberMask';
const BRL_CAR_PLATE = [/[a-zA-Z]/, /[a-zA-Z]/, /[a-zA-Z]/, '-', /\d/, /\w/, /\d/, /\d/];
const BRL_CNPJ = [/\d/, /\d/, '.', /\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/];
const BRL_CPF = [/\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, '-', /\d/, /\d/];
const BRL_CPF_CNPJ = text => {
const rawValue = (text === null || text === void 0 ? void 0 : text.replace(/\D+/g, '')) || '';
return rawValue.length <= 11 ? BRL_CPF : BRL_CNPJ;
};
const BRL_CURRENCY = createNumberMask({
prefix: ['R', '$', ' '],
separator: ',',
delimiter: '.',
precision: 2
});
const BRL_PHONE = ['(', /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/];
const CREDIT_CARD = [/\d/, /\d/, /\d/, /\d/, ' ', [/\d/], [/\d/], [/\d/], [/\d/], ' ', [/\d/], [/\d/], [/\d/], [/\d/], ' ', /\d/, /\d/, /\d/, /\d/];
const DATE_DDMMYYYY = [/[0-3]/, /\d/, '/', /[0-1]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/];
const DATE_MMDDYYYY = [/[0-1]/, /\d/, '/', /[0-3]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/];
const DATE_YYYYMMDD = [/\d/, /\d/, /\d/, /\d/, '/', /[0-1]/, /\d/, '/', /[0-3]/, /\d/];
const ZIP_CODE = [/\d/, /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/];
export default {
BRL_CAR_PLATE: [/[a-zA-Z]/, /[a-zA-Z]/, /[a-zA-Z]/, '-', /\d/, /\w/, /\d/, /\d/],
BRL_CNPJ: [/\d/, /\d/, '.', /\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/],
BRL_CPF: [/\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, '-', /\d/, /\d/],
BRL_CURRENCY: createNumberMask({
prefix: ['R', '$', ' '],
separator: ',',
delimiter: '.',
precision: 2
}),
BRL_PHONE: ['(', /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
CREDIT_CARD: [/\d/, /\d/, /\d/, /\d/, ' ', [/\d/], [/\d/], [/\d/], [/\d/], ' ', [/\d/], [/\d/], [/\d/], [/\d/], ' ', /\d/, /\d/, /\d/, /\d/],
DATE_DDMMYYYY: [/[0-3]/, /\d/, '/', /[0-1]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
DATE_MMDDYYYY: [/[0-1]/, /\d/, '/', /[0-3]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
DATE_YYYYMMDD: [/\d/, /\d/, /\d/, /\d/, '/', /[0-1]/, /\d/, '/', /[0-3]/, /\d/],
ZIP_CODE: [/\d/, /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/]
BRL_CAR_PLATE,
BRL_CNPJ,
BRL_CPF,
BRL_CPF_CNPJ,
BRL_CURRENCY,
BRL_PHONE,
CREDIT_CARD,
DATE_DDMMYYYY,
DATE_MMDDYYYY,
DATE_YYYYMMDD,
ZIP_CODE
};
//# sourceMappingURL=Masks.js.map

1

lib/typescript/src/Masks.d.ts

@@ -6,2 +6,3 @@ import type { MaskArray } from './formatWithMask.types';

BRL_CPF: (string | RegExp)[];
BRL_CPF_CNPJ: (text?: string | undefined) => (string | RegExp)[];
BRL_CURRENCY: import("./formatWithMask.types").Mask;

@@ -8,0 +9,0 @@ BRL_PHONE: (string | RegExp)[];

2

package.json
{
"name": "react-native-mask-input",
"version": "1.0.1",
"version": "1.0.2",
"description": "TextInput with mask for ReactNative on both iOS and Android. Includes obfuscation characters feature.",

@@ -5,0 +5,0 @@ "main": "lib/commonjs/index",

188

README.md

@@ -24,2 +24,6 @@ <h1 align="center">React Native Mask Input</h1>

- [Mask](#mask)
- [Using function mask](#using-function-mask)
- [Obfuscation](#obfuscation)
- [Predefined Masks](#predefined-masks)
- [createNumberMask](#createnumbermasknumberoptions)
- [Example](#example)

@@ -32,6 +36,6 @@ - [formatWithMask](#formatwithmaskoptions)

- Highly custom masks with the use of `RegExp`
- Highly customizable masks with the use of `RegExp`
- **Characteres obfuscation!**
- It's just a [`<TextInput/>`](https://facebook.github.io/react-native/docs/textinput.html) component, as I said, no fancy stuff
- Use React Native ES6 and React Hooks
- It's just a [`<TextInput/>`](https://facebook.github.io/react-native/docs/textinput.html) component, no fancy/complex stuff
- Use React Native ES6, Typescript and React Hooks
- Exports the function that do all the magic: [`formatWithMask`](#formatwithmaskoptions)

@@ -66,8 +70,9 @@

value={phone}
onChangeValue={(masked, unmasked) => {
onChangeValue={(masked, unmasked, obfuscated) => {
setPhone(masked); // you can use the unmasked value as well
// assuming you type "9" all the way, in example:
// assuming you typed "9" all the way:
console.log(masked); // (99) 99999-9999
console.log(unmasked); // 99999999999
console.log(obfuscated); // (99) 99999-9999 (there's no obfuscation on this mask example)
}}

@@ -100,11 +105,11 @@ mask={[

| Prop | Type | Default | Description |
| -------------------------------- | ------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **...TextInputProps** | | | Inherit all [props of `TextInput`](https://reactnative.dev/docs/textinput#props). |
| **`value`** | number | | The value for controlled input. **REQUIRED** |
| **`onChangeText`** | function | | Callback that is called when the input's text changes. differently of the default function, this one receive three arguments: `(maskedText, unmaskedText, obfuscatedText) => void` **REQUIRED** |
| **`mask`** | [Mask](#mask) | | An array where each item defines one character of the value. If the item is a string, that string will be used, if it is an RegExp, it will validate the input on it. |
| **`showObfuscatedValue`** | boolean | false | Whether or not to display the obfuscated value on the `TextInput`. |
| **`placeholderFillCharacter`\*** | string | "\_" | Character to be used as the "fill character" on the default placeholder value. |
| **`obfuscationCharacter`** | string | "\*" | Character to be used on the obfuscated characteres. |
| Prop | Type | Default | Description |
| ------------------------------ | ------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **...TextInputProps** | | | Inherit all [props of `TextInput`](https://reactnative.dev/docs/textinput#props). |
| **`value`** | number | | The value for controlled input. **REQUIRED** |
| **`onChangeText`** | function | | Callback that is called when the input's text changes. differently of the default function, this one receive three arguments: `(maskedText, unmaskedText, obfuscatedText) => void` **REQUIRED** |
| **`mask`** | [Mask](#mask) | | An array where each item defines one character of the value. If the item is a string, that string will be used, if it is an RegExp, it will validate the input on it. |
| **`showObfuscatedValue`** | boolean | false | Whether or not to display the obfuscated value on the `TextInput`. |
| **`placeholderFillCharacter`** | string | `_` | Character to be used as the "fill character" on the default placeholder value. |
| **`obfuscationCharacter`** | string | `*` | Character to be used on the obfuscated characteres. |

@@ -115,5 +120,5 @@ <br>

An array where each item defines one character of the value. If the item is a string, that string will be used, if it is an RegExp, it will validate the input on it.
An array where each item defines one character of the value. If the item is a string, that string will be used, if it is an `RegExp`, it will validate the input on it.
**To be clear:** All the characters you want to be inputed by the user must be a `Regex` in your mask.
**To be clear:** All the characters you want to be inputed by the user must be a `RegExp` in your mask.

@@ -123,3 +128,3 @@ If you want a mask for Zip Code, for example, you'd do like this:

```javascript
const mask = [/\d/, /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/];
const zipCodeMask = [/\d/, /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/];
```

@@ -129,2 +134,149 @@

```javascript
const { masked, unmasked, obfuscated } = formatWithMask({
text: '71680345',
mask: zipCodeMask,
});
console.log(masked); // "71680-345"
console.log(unmasked); // "71680345"
console.log(obfuscated); // "71680-345"
```
### Using function mask
The mask can also be a function that receives the current value and returns the array mask. That's to help you to change the mask dynamically based on the value.
```javascript
function MyComponent() {
const [value, setValue] = React.useState('');
return (
<MaskInput
value={phone}
onChangeValue={setValue}
mask={(text) => {
// that's a nonsense example, sorry
if (text.charAt(0) === '1') {
return [/\d/, '-', /\d/];
} else {
return [/\d/, '/', /\d/];
}
}}
/>
);
}
```
### Obfuscation
To mark a character as obfuscated, use the `RegExp` within an array, like this:
```javascript
const zipCodeMaskWithObfuscation = [
/\d/,
/\d/,
[/\d/],
[/\d/],
[/\d/],
'-',
/\d/,
/\d/,
/\d/,
];
function MyComponent() {
const [zipCode, setZipCode] = React.useState('');
return (
<MaskInput
value={zipCode}
mask={zipCodeMaskWithObfuscation}
onChangeValue={(masked, unmasked, obfuscated) => {
setValue(unmasked); // you can use the masked value as well
// assuming you typed "71680345":
console.log(masked); // "71680-345"
console.log(unmasked); // "71680345"
console.log(obfuscated); // "71***-345"
}}
/>
);
}
```
### Predefined Masks
in order to perhaps help some of you, some commonly used masks are exported, if it does not fit your use case I hope it'll at least serve as an inspiration:
```javascript
import MaskInput, { Masks } from 'react-native-mask-input';
function MyComponent() {
const [creditCard, setCreditCard] = React.useState('');
return (
<MaskInput
value={creditCard}
onChangeValue={setCreditCard}
mask={Masks.CREDIT_CARD}
/>
);
}
```
| Mask | Use case |
| ------------------- | --------------------------- |
| Masks.BRL_CAR_PLATE | ABC-1234 |
| Masks.BRL_CPNJ | 33.594.232/0001-00 |
| Masks.BRL_CPF | 903.549.000-21 |
| Masks.BRL_CURRENCY | R\$ 1.234,56 |
| Masks.BRL_PHONE | (61) 99966-7746 |
| Masks.CREDIT_CARD | 9999 \*\*\*\* \*\*\*\* 9999 |
| Masks.DATE_DDMMYYYY | 12/04/1995 |
| Masks.DATE_MMDDYYYY | 04/12/1995 |
| Masks.DATE_YYYYMMDD | 1995/04/12 |
| Masks.ZIP_CODE | 71680-345 |
### `createNumberMask(numberOptions)`
This is a helper function to create a number mask, you'd use this on currency input cases for example.
```javascript
import MaskInput, { createNumberMask } from 'react-native-mask-input';
function MyComponent() {
const [value, setValue] = React.useState('');
return (
<MaskInput
value={value}
mask={createNumberMask({
prefix: ['U', '$', ' '],
delimiter: ',',
separator: '.',
precision: 2,
})}
onChangeValue={(masked, unmasked, obfuscated) => {
setValue(unmasked); // you can use the masked value as well
// assuming you typed "123456":
console.log(masked); // "U$ 1,234.56"
console.log(unmasked); // "123456"
console.log(obfuscated); // "U$ 1,234.56" (there's no obfuscation on the generated mask)
}}
/>
);
}
```
#### `numberOptions`
| Name | Type | Default | Description |
| --------------- | ------------- | --------------- | --------------------------------------- |
| **`prefix`** | [Mask](#mask) | ["R", "$", " "] | Mask to be prefixed on the mask result. |
| **`delimiter`** | string | `.` | Character for thousands delimiter. |
| **`separator`** | string | `,` | Decimal separator character. |
| **`precision`** | number | 2 | Decimal precision. |
<br>

@@ -169,3 +321,3 @@

| **`mask`** | [Mask](#mask) | | An array where each item defines one character of the value. If the item is a string, that string will be used, if it is an RegExp, it will validate the input on it. |
| **`obfuscationCharacter`** | string | "\*" | Character to be used on the obfuscated characteres. |
| **`obfuscationCharacter`** | string | `*` | Character to be used on the obfuscated characteres. |

@@ -172,0 +324,0 @@ ## Contributing

0

src/createNumberMask.ts

@@ -0,0 +0,0 @@ import type { MaskArray } from './formatWithMask.types';

0

src/createNumberMask.types.ts

@@ -0,0 +0,0 @@ import type { MaskArray } from './formatWithMask.types';

193

src/Masks.ts
import createNumberMask from './createNumberMask';
import type { MaskArray } from './formatWithMask.types';
const BRL_CAR_PLATE = [/[a-zA-Z]/, /[a-zA-Z]/, /[a-zA-Z]/, '-', /\d/, /\w/, /\d/, /\d/];
const BRL_CNPJ = [
/\d/,
/\d/,
'.',
/\d/,
/\d/,
/\d/,
'.',
/\d/,
/\d/,
/\d/,
'/',
/\d/,
/\d/,
/\d/,
/\d/,
'-',
/\d/,
/\d/,
];
const BRL_CPF = [
/\d/,
/\d/,
/\d/,
'.',
/\d/,
/\d/,
/\d/,
'.',
/\d/,
/\d/,
/\d/,
'-',
/\d/,
/\d/,
];
const BRL_CPF_CNPJ = (text?: string) => {
const rawValue = text?.replace(/\D+/g, '') || '';
return rawValue.length <= 11 ? BRL_CPF : BRL_CNPJ;
};
const BRL_CURRENCY = createNumberMask({
prefix: ['R', '$', ' '],
separator: ',',
delimiter: '.',
precision: 2,
});
const BRL_PHONE = [
'(',
/\d/,
/\d/,
')',
' ',
/\d/,
/\d/,
/\d/,
/\d/,
/\d/,
'-',
/\d/,
/\d/,
/\d/,
/\d/,
];
const CREDIT_CARD = [
/\d/,
/\d/,
/\d/,
/\d/,
' ',
[/\d/],
[/\d/],
[/\d/],
[/\d/],
' ',
[/\d/],
[/\d/],
[/\d/],
[/\d/],
' ',
/\d/,
/\d/,
/\d/,
/\d/,
] as MaskArray;
const DATE_DDMMYYYY = [/[0-3]/, /\d/, '/', /[0-1]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/];
const DATE_MMDDYYYY = [/[0-1]/, /\d/, '/', /[0-3]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/];
const DATE_YYYYMMDD = [/\d/, /\d/, /\d/, /\d/, '/', /[0-1]/, /\d/, '/', /[0-3]/, /\d/];
const ZIP_CODE = [/\d/, /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/];
export default {
BRL_CAR_PLATE: [/[a-zA-Z]/, /[a-zA-Z]/, /[a-zA-Z]/, '-', /\d/, /\w/, /\d/, /\d/],
BRL_CNPJ: [
/\d/,
/\d/,
'.',
/\d/,
/\d/,
/\d/,
'.',
/\d/,
/\d/,
/\d/,
'/',
/\d/,
/\d/,
/\d/,
/\d/,
'-',
/\d/,
/\d/,
],
BRL_CPF: [
/\d/,
/\d/,
/\d/,
'.',
/\d/,
/\d/,
/\d/,
'.',
/\d/,
/\d/,
/\d/,
'-',
/\d/,
/\d/,
],
BRL_CURRENCY: createNumberMask({
prefix: ['R', '$', ' '],
separator: ',',
delimiter: '.',
precision: 2,
}),
BRL_PHONE: [
'(',
/\d/,
/\d/,
')',
' ',
/\d/,
/\d/,
/\d/,
/\d/,
/\d/,
'-',
/\d/,
/\d/,
/\d/,
/\d/,
],
CREDIT_CARD: [
/\d/,
/\d/,
/\d/,
/\d/,
' ',
[/\d/],
[/\d/],
[/\d/],
[/\d/],
' ',
[/\d/],
[/\d/],
[/\d/],
[/\d/],
' ',
/\d/,
/\d/,
/\d/,
/\d/,
] as MaskArray,
DATE_DDMMYYYY: [/[0-3]/, /\d/, '/', /[0-1]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
DATE_MMDDYYYY: [/[0-1]/, /\d/, '/', /[0-3]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
DATE_YYYYMMDD: [/\d/, /\d/, /\d/, /\d/, '/', /[0-1]/, /\d/, '/', /[0-3]/, /\d/],
ZIP_CODE: [/\d/, /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/],
BRL_CAR_PLATE,
BRL_CNPJ,
BRL_CPF,
BRL_CPF_CNPJ,
BRL_CURRENCY,
BRL_PHONE,
CREDIT_CARD,
DATE_DDMMYYYY,
DATE_MMDDYYYY,
DATE_YYYYMMDD,
ZIP_CODE,
};
lib/commonjs/createNumberMask.js.map

Sorry, the diff of this file is not supported yet

lib/commonjs/index.js.map

Sorry, the diff of this file is not supported yet

lib/commonjs/Masks.js.map

Sorry, the diff of this file is not supported yet

lib/module/createNumberMask.js.map

Sorry, the diff of this file is not supported yet

lib/module/index.js.map

Sorry, the diff of this file is not supported yet

lib/module/Masks.js.map

Sorry, the diff of this file is not supported yet

src/index.tsx

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc