New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

react-native-masked-text

Package Overview
Dependencies
Maintainers
1
Versions
50
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-masked-text - npm Package Compare versions

Comparing version 1.6.4 to 1.6.5

95

__tests__/cnpj.mask.test.js

@@ -1,66 +0,73 @@

import { CnpjMask } from '../lib/masks';
import { CnpjMask } from '../lib/masks'
test('getType results cnpj', () => {
var expected = 'cnpj';
var received = CnpjMask.getType();
var expected = 'cnpj'
var received = CnpjMask.getType()
expect(received).toBe(expected);
});
expect(received).toBe(expected)
})
test('79885262000130 results 79.885.262/0001-30', () => {
var mask = new CnpjMask();
var expected = '79.885.262/0001-30';
var received = mask.getValue('79885262000130');
var mask = new CnpjMask()
var expected = '79.885.262/0001-30'
var received = mask.getValue('79885262000130')
expect(received).toBe(expected);
});
expect(received).toBe(expected)
})
test('798852 results 79.885.2', () => {
var mask = new CnpjMask();
var expected = '79.885.2';
var received = mask.getValue('798852');
var mask = new CnpjMask()
var expected = '79.885.2'
var received = mask.getValue('798852')
expect(received).toBe(expected);
});
expect(received).toBe(expected)
})
test('79885262000130 results 79.885.262/0001-30 and is valid', () => {
var mask = new CnpjMask();
var expected = '79.885.262/0001-30';
var received = mask.getValue('79885262000130');
var isValid = mask.validate(received);
var mask = new CnpjMask()
var expected = '79.885.262/0001-30'
var received = mask.getValue('79885262000130')
var isValid = mask.validate(received)
expect(received).toBe(expected);
expect(isValid).toBe(true);
});
expect(received).toBe(expected)
expect(isValid).toBe(true)
})
test('79885262000140 results 79.885.262/0001-40 and is not valid', () => {
var mask = new CnpjMask();
var expected = '79.885.262/0001-40';
var received = mask.getValue('79885262000140');
var isValid = mask.validate(received);
var mask = new CnpjMask()
var expected = '79.885.262/0001-40'
var received = mask.getValue('79885262000140')
var isValid = mask.validate(received)
expect(received).toBe(expected);
expect(isValid).toBe(false);
});
expect(received).toBe(expected)
expect(isValid).toBe(false)
})
test('7988526200013 results 79.885.262/0001-3 and is not valid', () => {
var mask = new CnpjMask();
var expected = '79.885.262/0001-3';
var received = mask.getValue('7988526200013');
var isValid = mask.validate(received);
var mask = new CnpjMask()
var expected = '79.885.262/0001-3'
var received = mask.getValue('7988526200013')
var isValid = mask.validate(received)
expect(received).toBe(expected);
expect(isValid).toBe(false);
});
expect(received).toBe(expected)
expect(isValid).toBe(false)
})
test('79885262000130 results 79.885.262/0001-30 and raw value 79885262000130', () => {
var mask = new CnpjMask();
var expected = '79.885.262/0001-30';
var received = mask.getValue('79885262000130');
var mask = new CnpjMask()
var expected = '79.885.262/0001-30'
var received = mask.getValue('79885262000130')
var expectedRawValue = '79885262000130';
var receivedRawValue = mask.getRawValue(received);
var expectedRawValue = '79885262000130'
var receivedRawValue = mask.getRawValue(received)
expect(received).toBe(expected);
expect(receivedRawValue).toBe(expectedRawValue);
});
expect(received).toBe(expected)
expect(receivedRawValue).toBe(expectedRawValue)
})
test('empty cnpj is invalid', () => {
var mask = new CnpjMask()
var received = mask.validate('', {})
expect(received).toBeFalsy()
})

@@ -1,66 +0,73 @@

import { CpfMask } from '../lib/masks';
import { CpfMask } from '../lib/masks'
test('getType results cpf', () => {
var expected = 'cpf';
var received = CpfMask.getType();
var expected = 'cpf'
var received = CpfMask.getType()
expect(received).toBe(expected);
});
expect(received).toBe(expected)
})
test('12312312356 results 123.123.123-56', () => {
var mask = new CpfMask();
var expected = '123.123.123-56';
var received = mask.getValue('12312312356');
var mask = new CpfMask()
var expected = '123.123.123-56'
var received = mask.getValue('12312312356')
expect(received).toBe(expected);
});
expect(received).toBe(expected)
})
test('123123 results 123.123', () => {
var mask = new CpfMask();
var expected = '123.123';
var received = mask.getValue('123123');
var mask = new CpfMask()
var expected = '123.123'
var received = mask.getValue('123123')
expect(received).toBe(expected);
});
expect(received).toBe(expected)
})
test('07833823678 results 078.338.236-78 and is valid', () => {
var mask = new CpfMask();
var expected = '078.338.236-78';
var received = mask.getValue('07833823678');
var isValid = mask.validate(received);
var mask = new CpfMask()
var expected = '078.338.236-78'
var received = mask.getValue('07833823678')
var isValid = mask.validate(received)
expect(received).toBe(expected);
expect(isValid).toBe(true);
});
expect(received).toBe(expected)
expect(isValid).toBe(true)
})
test('11111111111 results 111.111.111-11 and is not valid', () => {
var mask = new CpfMask();
var expected = '111.111.111-11';
var received = mask.getValue('11111111111');
var isValid = mask.validate(received);
var mask = new CpfMask()
var expected = '111.111.111-11'
var received = mask.getValue('11111111111')
var isValid = mask.validate(received)
expect(received).toBe(expected);
expect(isValid).toBe(false);
});
expect(received).toBe(expected)
expect(isValid).toBe(false)
})
test('1234567890 results 123.456.789-0 and is not valid', () => {
var mask = new CpfMask();
var expected = '123.456.789-0';
var received = mask.getValue('1234567890');
var isValid = mask.validate(received);
var mask = new CpfMask()
var expected = '123.456.789-0'
var received = mask.getValue('1234567890')
var isValid = mask.validate(received)
expect(received).toBe(expected);
expect(isValid).toBe(false);
});
expect(received).toBe(expected)
expect(isValid).toBe(false)
})
test('12312312356 results 123.123.123-56 and raw value 12312312356', () => {
var mask = new CpfMask();
var expected = '123.123.123-56';
var received = mask.getValue('12312312356');
var mask = new CpfMask()
var expected = '123.123.123-56'
var received = mask.getValue('12312312356')
var expectedRawValue = '12312312356';
var receivedRawValue = mask.getRawValue(received);
var expectedRawValue = '12312312356'
var receivedRawValue = mask.getRawValue(received)
expect(received).toBe(expected);
expect(receivedRawValue).toBe(expectedRawValue);
});
expect(received).toBe(expected)
expect(receivedRawValue).toBe(expectedRawValue)
})
test('empty cpf is invalid', () => {
var mask = new CpfMask()
var received = mask.validate('', {})
expect(received).toBeFalsy()
})

@@ -12,3 +12,3 @@ Object.defineProperty(exports,"__esModule",{value:true});var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor;};}();var _get=function get(object,property,receiver){if(object===null)object=Function.prototype;var desc=Object.getOwnPropertyDescriptor(object,property);if(desc===undefined){var parent=Object.getPrototypeOf(object);if(parent===null){return undefined;}else{return get(parent,property,receiver);}}else if("value"in desc){return desc.value;}else{var getter=desc.get;if(getter===undefined){return undefined;}return getter.call(receiver);}};var _base=require('./_base.mask');var _base2=_interopRequireDefault(_base);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _possibleConstructorReturn(self,call){if(!self){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return call&&(typeof call==="object"||typeof call==="function")?call:self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function, not "+typeof superClass);}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:false,writable:true,configurable:true}});if(superClass)Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass;}

var exp=/\.|\-|\//g;
cnpj=cnpj.toString().replace(exp,"");
cnpj=cnpj.toString().replace(exp,'');
var digito=new Number(eval(cnpj.charAt(12)+cnpj.charAt(13)));

@@ -40,3 +40,4 @@

value,settings){
return validateCnpj(value);
var isEmpty=(value||'').trim().length===0;
return!isEmpty&&validateCnpj(value);
}}],[{key:'getType',value:function getType(){return'cnpj';}}]);return CnpjMask;}(_base2.default);exports.default=CnpjMask;

@@ -6,7 +6,7 @@ Object.defineProperty(exports,"__esModule",{value:true});var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor;};}();var _get=function get(object,property,receiver){if(object===null)object=Function.prototype;var desc=Object.getOwnPropertyDescriptor(object,property);if(desc===undefined){var parent=Object.getPrototypeOf(object);if(parent===null){return undefined;}else{return get(parent,property,receiver);}}else if("value"in desc){return desc.value;}else{var getter=desc.get;if(getter===undefined){return undefined;}return getter.call(receiver);}};var _base=require('./_base.mask');var _base2=_interopRequireDefault(_base);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _possibleConstructorReturn(self,call){if(!self){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return call&&(typeof call==="object"||typeof call==="function")?call:self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function, not "+typeof superClass);}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:false,writable:true,configurable:true}});if(superClass)Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass;}

var validateCPF=function validateCPF(cpf){
if(cpf==""){
if(cpf==''){
return true;
}
cpf=cpf.replace(/\./gi,"").replace(/-/gi,"");
cpf=cpf.replace(/\./gi,'').replace(/-/gi,'');
var isValid=true;

@@ -19,3 +19,15 @@ var sum;

if(cpf.length!=11||cpf=="00000000000"||cpf=="11111111111"||cpf=="22222222222"||cpf=="33333333333"||cpf=="44444444444"||cpf=="55555555555"||cpf=="66666666666"||cpf=="77777777777"||cpf=="88888888888"||cpf=="99999999999"){
if(
cpf.length!=11||
cpf=='00000000000'||
cpf=='11111111111'||
cpf=='22222222222'||
cpf=='33333333333'||
cpf=='44444444444'||
cpf=='55555555555'||
cpf=='66666666666'||
cpf=='77777777777'||
cpf=='88888888888'||
cpf=='99999999999')
{
isValid=false;

@@ -70,3 +82,4 @@ }

value,settings){
return validateCPF(value);
var isEmpty=(value||'').trim().length===0;
return!isEmpty&&validateCPF(value);
}}],[{key:'getType',value:function getType(){return'cpf';}}]);return CpfMask;}(_base2.default);exports.default=CpfMask;

@@ -1,41 +0,42 @@

import BaseMask from './_base.mask';
import BaseMask from './_base.mask'
const CNPJ_MASK = '99.999.999/9999-99';
const CNPJ_MASK = '99.999.999/9999-99'
const validateCnpj = cnpj => {
var valida = new Array(6,5,4,3,2,9,8,7,6,5,4,3,2);
var dig1= new Number;
var dig2= new Number;
var i = 0;
var valida = new Array(6, 5, 4, 3, 2, 9, 8, 7, 6, 5, 4, 3, 2)
var dig1 = new Number()
var dig2 = new Number()
var i = 0
var exp = /\.|\-|\//g;
cnpj = cnpj.toString().replace( exp, "" );
var digito = new Number(eval(cnpj.charAt(12)+cnpj.charAt(13)));
var exp = /\.|\-|\//g
cnpj = cnpj.toString().replace(exp, '')
var digito = new Number(eval(cnpj.charAt(12) + cnpj.charAt(13)))
for(i = 0; i<valida.length; i++){
dig1 += (i>0? (cnpj.charAt(i-1)*valida[i]):0);
dig2 += cnpj.charAt(i)*valida[i];
}
dig1 = (((dig1%11)<2)? 0:(11-(dig1%11)));
dig2 = (((dig2%11)<2)? 0:(11-(dig2%11)));
for (i = 0; i < valida.length; i++) {
dig1 += i > 0 ? cnpj.charAt(i - 1) * valida[i] : 0
dig2 += cnpj.charAt(i) * valida[i]
}
dig1 = dig1 % 11 < 2 ? 0 : 11 - dig1 % 11
dig2 = dig2 % 11 < 2 ? 0 : 11 - dig2 % 11
return (((dig1*10)+dig2) == digito);
return dig1 * 10 + dig2 == digito
}
export default class CnpjMask extends BaseMask {
static getType() {
return 'cnpj';
}
static getType() {
return 'cnpj'
}
getValue(value, settings) {
return this.getVMasker().toPattern(value, CNPJ_MASK);
}
getValue(value, settings) {
return this.getVMasker().toPattern(value, CNPJ_MASK)
}
getRawValue(maskedValue, settings) {
return super.removeNotNumbers(maskedValue);
getRawValue(maskedValue, settings) {
return super.removeNotNumbers(maskedValue)
}
validate(value, settings) {
return validateCnpj(value);
}
}
validate(value, settings) {
var isEmpty = (value || '').trim().length === 0
return !isEmpty && validateCnpj(value)
}
}

@@ -1,70 +0,83 @@

import BaseMask from './_base.mask';
import BaseMask from './_base.mask'
const CPF_MASK = '999.999.999-99';
const CPF_MASK = '999.999.999-99'
const validateCPF = (cpf) => {
if (cpf == "") {
return true;
}
cpf = cpf.replace(/\./gi, "").replace(/-/gi, "");
var isValid = true;
var sum;
var rest;
var i;
i = 0;
sum = 0;
if (cpf.length != 11 || cpf == "00000000000" || cpf == "11111111111" || cpf == "22222222222" || cpf == "33333333333" || cpf == "44444444444" || cpf == "55555555555" || cpf == "66666666666" || cpf == "77777777777" || cpf == "88888888888" || cpf == "99999999999") {
isValid = false;
}
for (i = 1; i <= 9; i++) {
sum = sum + parseInt(cpf.substring(i - 1, i)) * (11 - i);
}
rest = (sum * 10) % 11;
if ((rest == 10) || (rest == 11)) {
rest = 0;
}
if (rest != parseInt(cpf.substring(9, 10))) {
isValid = false;
}
sum = 0;
for (i = 1; i <= 10; i++) {
sum = sum + parseInt(cpf.substring(i - 1, i)) * (12 - i);
}
rest = (sum * 10) % 11;
if ((rest == 10) || (rest == 11)) {
rest = 0;
}
if (rest != parseInt(cpf.substring(10, 11))) {
isValid = false;
}
return isValid;
const validateCPF = cpf => {
if (cpf == '') {
return true
}
cpf = cpf.replace(/\./gi, '').replace(/-/gi, '')
var isValid = true
var sum
var rest
var i
i = 0
sum = 0
if (
cpf.length != 11 ||
cpf == '00000000000' ||
cpf == '11111111111' ||
cpf == '22222222222' ||
cpf == '33333333333' ||
cpf == '44444444444' ||
cpf == '55555555555' ||
cpf == '66666666666' ||
cpf == '77777777777' ||
cpf == '88888888888' ||
cpf == '99999999999'
) {
isValid = false
}
for (i = 1; i <= 9; i++) {
sum = sum + parseInt(cpf.substring(i - 1, i)) * (11 - i)
}
rest = (sum * 10) % 11
if (rest == 10 || rest == 11) {
rest = 0
}
if (rest != parseInt(cpf.substring(9, 10))) {
isValid = false
}
sum = 0
for (i = 1; i <= 10; i++) {
sum = sum + parseInt(cpf.substring(i - 1, i)) * (12 - i)
}
rest = (sum * 10) % 11
if (rest == 10 || rest == 11) {
rest = 0
}
if (rest != parseInt(cpf.substring(10, 11))) {
isValid = false
}
return isValid
}
export default class CpfMask extends BaseMask {
static getType() {
return 'cpf';
}
static getType() {
return 'cpf'
}
getValue(value, settings) {
return this.getVMasker().toPattern(value, CPF_MASK);
}
getValue(value, settings) {
return this.getVMasker().toPattern(value, CPF_MASK)
}
getRawValue(maskedValue, settings) {
return super.removeNotNumbers(maskedValue);
}
getRawValue(maskedValue, settings) {
return super.removeNotNumbers(maskedValue)
}
validate(value, settings) {
return validateCPF(value);
}
}
validate(value, settings) {
var isEmpty = (value || '').trim().length === 0
return !isEmpty && validateCPF(value)
}
}
{
"name": "react-native-masked-text",
"version": "1.6.4",
"description": "Text and TextInput with mask for React Native applications",
"licenses": [
{
"type": "MIT",
"url": "https://www.opensource.org/licenses/mit-license.php"
}
],
"main": "./dist/index.js",
"scripts": {
"clean": "rimraf dist",
"test": "jest",
"build": "babel ./index.js ./lib/*.js ./lib/**/*.js -d ./dist",
"prepublish": "npm run clean && npm run build"
},
"repository": {
"type": "git",
"url": "git+https://github.com/benhurott/react-native-masked-text.git"
},
"keywords": ["mask", "text", "textinput", "react-native"],
"author": "Ben-hur Santos Ott",
"license": "ISC",
"bugs": {
"url": "https://github.com/benhurott/react-native-masked-text/issues"
},
"homepage": "https://github.com/benhurott/react-native-masked-text#readme",
"dependencies": {
"moment": "^2.19.1",
"tinymask": "^1.0.2"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-react-native": "^1.9.1",
"jest": "^19.0.2",
"rimraf": "^2.6.2"
}
"name": "react-native-masked-text",
"version": "1.6.5",
"description": "Text and TextInput with mask for React Native applications",
"licenses": [
{
"type": "MIT",
"url": "https://www.opensource.org/licenses/mit-license.php"
}
],
"main": "./dist/index.js",
"scripts": {
"clean": "rimraf dist",
"test": "jest",
"build": "babel ./index.js ./lib/*.js ./lib/**/*.js -d ./dist",
"prepublish": "npm run clean && npm run build"
},
"repository": {
"type": "git",
"url": "git+https://github.com/benhurott/react-native-masked-text.git"
},
"keywords": ["mask", "text", "textinput", "react-native"],
"author": "Ben-hur Santos Ott",
"license": "ISC",
"bugs": {
"url": "https://github.com/benhurott/react-native-masked-text/issues"
},
"homepage": "https://github.com/benhurott/react-native-masked-text#readme",
"dependencies": {
"moment": "^2.19.1",
"tinymask": "^1.0.2"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-react-native": "^1.9.1",
"jest": "^19.0.2",
"rimraf": "^2.6.2"
}
}

@@ -8,19 +8,21 @@ # react-native-masked-text

## Supported Versions
## Supported Versions
React-native: 0.32.0 or higher
## Install
`npm install react-native-masked-text --save`
## Usage (TextInputMask)
```jsx
import React, {Component} from 'react';
import React, { Component } from 'react'
// import the component
import {TextInputMask} from 'react-native-masked-text';
import { TextInputMask } from 'react-native-masked-text'
export default class MyComponent extends Component {
constructor(props) {
super(props);
super(props)
}

@@ -32,7 +34,7 @@

// because in this case, the day and the hour is invalid.
let valid = this.refs['myDateText'].isValid();
let valid = this.refs['myDateText'].isValid()
// get converted value. Using type=datetime, it returns the moment object.
// If it's using type=money, it returns a Number object.
let rawValue = this.refs['myDateText'].getRawValue();
let rawValue = this.refs['myDateText'].getRawValue()
}

@@ -48,7 +50,7 @@

format: 'DD-MM-YYYY HH:mm:ss'
}} />
);
}}
/>
)
}
}
```

@@ -60,16 +62,16 @@

*credit-card*: use the mask 9999 9999 9999 9999. It accepts options (see later in this doc). <br />
*cpf*: use the mask `999.999.999-99` and `numeric` keyboard. <br />
*cnpj*: use the mask `99.999.999/9999-99` and `numeric` keyboard. <br />
*zip-code*: use the mask `99999-999` and `numeric` keyboard. <br />
*only-numbers*: accept only numbers on field with `numeric` keyboard. <br />
*money*: use the mask `R$ 0,00` on the field with `numeric` keyboard. It accepts options (see later in this doc). <br />
*cel-phone*: use the mask `(99) 9999-9999` or `(99) 99999-9999` (changing automaticaly by length). It accepts options (see later in this doc). <br />
*datetime*: use datetime mask with moment format (default DD/MM/YYYY HH:mm:ss). It accepts options (see later in this doc). <br />
*custom*: use your custom mask (see the options props later in this doc). <br />
_credit-card_: use the mask 9999 9999 9999 9999. It accepts options (see later in this doc). <br />
_cpf_: use the mask `999.999.999-99` and `numeric` keyboard. <br />
_cnpj_: use the mask `99.999.999/9999-99` and `numeric` keyboard. <br />
_zip-code_: use the mask `99999-999` and `numeric` keyboard. <br />
_only-numbers_: accept only numbers on field with `numeric` keyboard. <br />
_money_: use the mask `R$ 0,00` on the field with `numeric` keyboard. It accepts options (see later in this doc). <br />
_cel-phone_: use the mask `(99) 9999-9999` or `(99) 99999-9999` (changing automaticaly by length). It accepts options (see later in this doc). <br />
_datetime_: use datetime mask with moment format (default DD/MM/YYYY HH:mm:ss). It accepts options (see later in this doc). <br />
_custom_: use your custom mask (see the options props later in this doc). <br />
#### onChangeText
Invoked after new value applied to mask.
```jsx

@@ -88,3 +90,2 @@ /**

#### checkText

@@ -115,8 +116,7 @@

const Textfield = MKTextField.textfield()
.withPlaceholder('Text...')
.withStyle(styles.textfield)
.build();
.withPlaceholder('Text...')
.withStyle(styles.textfield)
.build()
<TextInputMask
;<TextInputMask
ref={'myDateText'}

@@ -126,3 +126,4 @@ type={'money'}

customTextInput={Textfield}
placeholder="Enter text to see events" />
placeholder="Enter text to see events"
/>
```

@@ -135,50 +136,49 @@

```jsx
import React from 'react';
import { StyleSheet, View } from 'react-native';
import React from 'react'
import { StyleSheet, View } from 'react-native'
import { TextInputMask } from 'react-native-masked-text';
import { Kaede } from 'react-native-textinput-effects';
import { TextInputMask } from 'react-native-masked-text'
import { Kaede } from 'react-native-textinput-effects'
export default class App extends React.Component {
constructor(props) {
super(props)
constructor(props) {
super(props)
this.state = {
birthday: ''
}
}
this.state = {
birthday: ''
}
}
render() {
return (
<View style={styles.container}>
<TextInputMask
ref={'myDateText'}
// here we set the custom component and their props.
customTextInput={Kaede}
customTextInputProps={{
style:{ width: '80%' },
label:'Birthday'
}}
type={'datetime'}
options={{
format: 'DD-MM-YYYY HH:mm:ss'
}}
// don't forget: the value and state!
onChangeText={birthday => this.setState({ birthday })}
value={this.state.birthday} />
</View>
);
}
render() {
return (
<View style={styles.container}>
<TextInputMask
ref={'myDateText'}
// here we set the custom component and their props.
customTextInput={Kaede}
customTextInputProps={{
style: { width: '80%' },
label: 'Birthday'
}}
type={'datetime'}
options={{
format: 'DD-MM-YYYY HH:mm:ss'
}}
// don't forget: the value and state!
onChangeText={birthday => this.setState({ birthday })}
value={this.state.birthday}
/>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
}
});
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center'
}
})
```

@@ -202,21 +202,25 @@

// when you call getElement method, the instance of native TextInput will returned.
this.refs['myText'].getElement().focus();
this.refs['myText'].getElement().focus()
}
render() {
return (
<View style={styles.container}>
<View>
<TextInputMask ref='myText' type={'only-numbers'} style={styles.input}/>
</View>
<View>
<Button
onPress={this.onGoFocus.bind(this)}
title="Go Focus Hue"
color="#841584"
/>
</View>
</View>
);
}
render() {
return (
<View style={styles.container}>
<View>
<TextInputMask
ref="myText"
type={'only-numbers'}
style={styles.input}
/>
</View>
<View>
<Button
onPress={this.onGoFocus.bind(this)}
title="Go Focus Hue"
color="#841584"
/>
</View>
</View>
)
}
}

@@ -229,32 +233,34 @@ ```

**For `type={'money'}`** <br />
* *options={...}*
* `precision` (Number, default 2): the decimal places.
* `separator` (String, default ','): the decimal separator.
* `delimiter` (String, default '.'): the thousand separator.
* `unit`: (String, default 'R$'): the prefix text.
* `suffixUnit` (String, default ''): the suffix text.
* `zeroCents` (Boolean, default false): if must show cents.
* _options={...}_
_ `precision` (Number, default 2): the decimal places.
_ `separator` (String, default ','): the decimal separator.
_ `delimiter` (String, default '.'): the thousand separator.
_ `unit`: (String, default 'R$'): the prefix text.
_ `suffixUnit` (String, default ''): the suffix text.
_ `zeroCents` (Boolean, default false): if must show cents.
**For `type={'cel-phone'}`** <br />
* *options={...}*
* `withDDD` (Boolean, default true): if the ddd will be include in the mask.
* `dddMask` (String, default '(99) '): the default mask applied if `withDDD` is true.
* _options={...}_
_ `withDDD` (Boolean, default true): if the ddd will be include in the mask.
_ `dddMask` (String, default '(99) '): the default mask applied if `withDDD` is true.
**For `type={'datetime'}`** <br />
* *options={...}*
* `format` (String, default DD/MM/YYYY HH:mm:ss): moment date format. It accepts the following:
* DD/MM/YYYY HH:mm:ss
* DD/MM/YYYY
* MM/DD/YYYY
* YYYY/MM/DD
* HH:mm:ss
* HH:mm
* HH
* *You can use all of dates with `-` instead of `/` if you want*
* _options={...}_
_ `format` (String, default DD/MM/YYYY HH:mm:ss): moment date format. It accepts the following:
_ DD/MM/YYYY HH:mm:ss
_ DD/MM/YYYY
_ MM/DD/YYYY
_ YYYY/MM/DD
_ HH:mm:ss
_ HH:mm
_ HH \* _You can use all of dates with `-` instead of `/` if you want_
**For `type={'custom'}`** <br />
* *options={...}*
* _options={...}_
```jsx

@@ -311,49 +317,28 @@ {

}
```
**For `type={'credit-card'}`** <br />
* *options={...}*
* `obfuscated` (Boolean, default false): if the mask must be `9999 **** **** 9999`
* _options={...}_ \* `obfuscated` (Boolean, default false): if the mask must be `9999 **** **** 9999`
### Methods
* `getElement()`: return the instance of *TextInput* component.
* `isValid()`: if the value inputed is valid for the mask.
* *credit-card*: return true if the mask is complete.
* *cpf*: return true if the mask is complete and cpf is valid.
* *cnpj*: return true if the mask is complete and cnpj is valid.
* *zip-code*: return true if the mask is complete.
* *only-numbers*: always returns true.
* *money*: always returns true.
* *cel-phone*: return true if the mask is complete.
* *datetime*: return true if the date value is valid for format.
* *custom*: use custom validation, if it not exist, always returns true.
* `getRawValue()`: get the converted value of mask.
* *credit-card*: return the array with the value parts. Ex: `1234 1234 1234 1234` returns `[1234, 1234, 1234, 1234]`.
* *cpf*: return the value without mask.
* *cnpj*: return the value without mask.
* *zip-code*: return the value without mask.
* *only-numbers*: return the value without mask.
* *money*: return the Number value. Ex: `R$ 1.234,56` returns `1234.56`.
* *cel-phone*: return the value without mask.
* *datetime*: return the `moment` object for the date and format.
* *custom*: use custom method (passed in options). If it not exists, returns the current value.
* `getElement()`: return the instance of _TextInput_ component.
* `isValid()`: if the value inputed is valid for the mask. \* _credit-card_: return true if the mask is complete. \* _cpf_: return true if the mask is complete and cpf is valid. \* _cnpj_: return true if the mask is complete and cnpj is valid. \* _zip-code_: return true if the mask is complete. \* _only-numbers_: always returns true. \* _money_: always returns true. \* _cel-phone_: return true if the mask is complete. \* _datetime_: return true if the date value is valid for format. \* _custom_: use custom validation, if it not exist, always returns true.
* `getRawValue()`: get the converted value of mask. \* _credit-card_: return the array with the value parts. Ex: `1234 1234 1234 1234` returns `[1234, 1234, 1234, 1234]`. \* _cpf_: return the value without mask. \* _cnpj_: return the value without mask. \* _zip-code_: return the value without mask. \* _only-numbers_: return the value without mask. \* _money_: return the Number value. Ex: `R$ 1.234,56` returns `1234.56`. \* _cel-phone_: return the value without mask. \* _datetime_: return the `moment` object for the date and format. \* _custom_: use custom method (passed in options). If it not exists, returns the current value.
## Usage (TextMask)
```jsx
import React, {Component} from 'react';
import React, { Component } from 'react'
// import the component
import {TextMask} from 'react-native-masked-text';
import { TextMask } from 'react-native-masked-text'
export default class MyComponent extends Component {
constructor(props) {
super(props);
super(props)
this.state = {
text: '4567123409871234'
};
}
}

@@ -370,35 +355,36 @@

obfuscated: true
}} />
);
}}
/>
)
}
}
```
### Props
The same of *TextInputMask*, but for React-Native *Text* component instead *TextInput*.
The same of _TextInputMask_, but for React-Native _Text_ component instead _TextInput_.
<br />
*Warning*: if the value not match the mask, it will not appear.
_Warning_: if the value not match the mask, it will not appear.
### Methods
`getElement()`: return the instance of *Text* component.
`getElement()`: return the instance of _Text_ component.
## Extra (MaskService)
If you want, we expose the `MaskService`. You can use it:
**Methods**
* static toMask(type, value, settings): mask a value.
* `type` (String, required): the type of the mask (`cpf`, `datetime`, etc...)
* `value` (String, required): the value to be masked
* `settings` (Object, optional): if the mask type accepts options, pass it in the settings parameter
_ `type` (String, required): the type of the mask (`cpf`, `datetime`, etc...)
_ `value` (String, required): the value to be masked \* `settings` (Object, optional): if the mask type accepts options, pass it in the settings parameter
* static isValid(type, value, settings): validate if the mask and the value match.
* `type` (String, required): the type of the mask (`cpf`, `datetime`, etc...)
* `value` (String, required): the value to be masked
* `settings` (Object, optional): if the mask type accepts options, pass it in the settings parameter
_ `type` (String, required): the type of the mask (`cpf`, `datetime`, etc...)
_ `value` (String, required): the value to be masked \* `settings` (Object, optional): if the mask type accepts options, pass it in the settings parameter
Ex:
``` jsx
import {MaskService} from 'react-native-masked-text'
```jsx
import { MaskService } from 'react-native-masked-text'

@@ -409,3 +395,3 @@ var money = MaskService.toMask('money', '123', {

delimiter: ','
});
})

@@ -416,10 +402,17 @@ // money -> US$ 1.23

## Throubleshooting
* If the `es2015` error throw by babel, try run `react-native start --reset-cache`
# Changelog
# Changelog
## 1.6.5
* Fixing validation for CPF and CNPJ when empty string is inputed.
## 1.6.4
* Fixing wrong format when use money mask and values with only one decimal place (`1.9`) (thanks to [Pablo](https://github.com/rochapablo)).
## 1.6.3
* Fixing moment version (thanks to [Edward Coleridge Smith](https://github.com/edcs))

@@ -429,12 +422,16 @@ * Adding pre-builded lib to improve build phase (thanks to [Giorgi Bagdavadze](https://github.com/notgiorgi))

## 1.6.2
* Fixing custom mask when removing value in middle of the text. (thanks to [Aleksandr Kompaniets](https://github.com/Oxyaction))
* KNOW ISSUE: the custom mask is not allowing user to input white spaces for `*` translation temporarily.
_ KNOW ISSUE: the custom mask is not allowing user to input white spaces for `_` translation temporarily.
## 1.6.1
* Fixing duplicated custom text input component. (thanks to [Pablo](https://github.com/rochapablo))
## 1.6.0
* Add compatibility to [react-native-textinput-effects](https://github.com/halilb/react-native-textinput-effects) by using `customTextInputProps` (thanks to [Pablo](https://github.com/rochapablo))
## 1.5.3
* Fix suffix backspace (thanks to [Thomas Kekeisen](https://github.com/blaues0cke))

@@ -444,42 +441,55 @@ * Fix last character on custom mask (thanks to [Daniel Maly](https://github.com/DanielMaly))

## 1.5.2
* Adding `keyboardType` to custom mask. (thanks to [Nurbek Abulgazin](https://github.com/nurbek-ab))
## 1.5.1
* Adding `tinymask` to fix some custom mask issues.
## 1.5.0
* Adding new and powerfull `custom` engine mask \m/.
## 1.4.0
* Adding `customTextInput` to allow other inputs instead native TextInput. (thanks to [Hellon Canella](https://github.com/helloncanella))
## 1.3.4
* Remove default value from mask to allow placeholder on text-input (thanks to [Cuong Hoang](https://github.com/cuonghv91)).
* Please, caution. This can cause some runtime breaking if you update to this version.
* Remove default value from mask to allow placeholder on text-input (thanks to [Cuong Hoang](https://github.com/cuonghv91)). \* Please, caution. This can cause some runtime breaking if you update to this version.
## 1.3.3
* Update dependencies (thanks to [Vlad-Zhukov](https://github.com/Vlad-Zhukov))
## 1.3.2
* Fix: ignoring Jet Brains ide files (thanks to [Vlad-Zhukov](https://github.com/Vlad-Zhukov))
## 1.3.1
* Performance: adding check if the next value to be applied to the mask is equal as actual and prevent state change.
## 1.3.0
* Feat: now you can check and prevent input text on `TextInputMask` using `checkText` prop.
## 1.2.2
* Fix: fixing es2015 preset (thanks to [vagnercsouza](https://github.com/vagnercsouza), [barakcoh](https://github.com/barakcoh), Marvin Santos)
## 1.2.1
* Fix: fixing white space after unit on money mask.
## 1.2.0
* Adding `getRawValue`.
## 1.1.1
* Fixing toolbox-service reference (thanks to [ziftinpeki](https://github.com/ziftinpeki)).
## 1.1.0
* Adding credit-card mask.

@@ -489,2 +499,3 @@ * Refactoring base mask to contain helpfull functions.

## 1.0.0
* Adding datetime and cnpj masks.

@@ -497,2 +508,3 @@ * [Breaking Change] Refactoring MaskService.

## 0.3.6
* Fix vanilla-mask path on windows.
SocketSocket SOC 2 Logo

Product

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

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc