react-native-masked-text
This is a simple masked text (normal text and input text) component for React-Native.
Thanks to vanilla-masker =).
Thanks to moment =).
Supported Versions
React-native: 0.32.0 or higher
Install
npm install react-native-masked-text --save
Usage (TextInputMask)
import React, {Component} from 'react';
import {TextInputMask} from 'react-native-masked-text';
export default class MyComponent extends Component {
constructor(props) {
super(props);
}
isValid() {
let valid = this.refs['myDateText'].isValid();
let rawValue = this.refs['myDateText'].getRawValue();
}
render() {
return (
<TextInputMask
ref={'myDateText'}
type={'datetime'}
options={{
format: 'DD-MM-YYYY HH:mm:ss'
}} />
);
}
}
Props
type
credit-card: use the mask 9999 9999 9999 9999. It accepts options (see later in this doc).
cpf: use the mask 999.999.999-99
and numeric
keyboard.
cnpj: use the mask 99.999.999/9999-99
and numeric
keyboard.
zip-code: use the mask 99999-999
and numeric
keyboard.
only-numbers: accept only numbers on field with numeric
keyboard.
money: use the mask R$ 0,00
on the field with numeric
keyboard. It accepts options (see later in this doc).
cel-phone: use the mask (99) 9999-9999
or (99) 99999-9999
(changing automaticaly by length). It accepts options (see later in this doc).
datetime: use datetime mask with moment format (default DD/MM/YYYY HH:mm:ss). It accepts options (see later in this doc).
custom: use your custom mask (see the options props later in this doc).
TextInput Props
You can use the native props of TextInput, with this in mind:
- onChangeText is intercepted by component.
- value is intercepted by component.
- if you pass keyboardType, it will override the keyboardType of masked component.
Options
Some types accept options, use it like this: <TextInputMask type={'money'} options={{ unit: 'US$' }} />
For type={'money'}
- 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'}
- 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'}
- 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'}
- options={...}
mask
(String, default ''): your mask template.
9
: accept digit.A
: accept alpha.S
: accept alphanumeric.
validator
(Function, default returns true): the function use to validate value. Must return true if valid or false if invalid.
- The function receives 2 parameters:
value
: current value.settings
: current settings
getRawValue
(Function, default returns the current value): the function that's invoked when getRawValue
method from component is called.
- The function receives 2 parameters:
value
: current value.settings
: current settings
For type={'credit-card'}
- 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.
Usage (TextMask)
import React, {Component} from 'react';
import {TextMask} from 'react-native-masked-text';
export default class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
text: '4567123409871234'
};
}
render() {
return (
<TextMask
value={this.state.text}
type={'credit-card'}
options={{
obfuscated: true
}} />
);
}
}
Props
The same of TextInputMask, but for React-Native Text component instead TextInput.
Warning: if the value not match the mask, it will not appear.
Methods
getElement()
: return the instance of Text component.
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 maskedsettings
(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 maskedsettings
(Object, optional): if the mask type accepts options, pass it in the settings parameter
Ex:
import {MaskService} from 'react-native-masked-text'
var money = MaskService.toMask('money', '123', {
unit: 'US$',
separator: '.',
delimiter: ','
});
Changelog
1.2.0
1.1.1
- Fixing toolbox-service reference (thanks to ziftinpeki).
1.1.0
- Adding credit-card mask.
- Refactoring base mask to contain helpfull functions.
1.0.0
- Adding datetime and cnpj masks.
- [Breaking Change] Refactoring MaskService.
- Separate mask handlers for better extensibility.
- Adding tests for all mask handlers.
- Refactoring Components for use new mask handlers.
0.3.6
- Fix vanilla-mask path on windows.