在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:benhurott/react-native-masked-text开源软件地址:https://github.com/benhurott/react-native-masked-text开源编程语言:JavaScript 99.5%开源软件介绍:react-native-masked-textThis is a simple masked text (normal text and input text) component for React-Native. AlertHey guys! Unfortunatelly I'm not developing js apps anymore. This repo will not receive updates anymore. Supported VersionsReact-native: 0.32.0 or higher Install
Usage (TextInputMask)For all the masks you will use in this way: import { TextInputMask } from 'react-native-masked-text'
//...
<TextInputMask
type={'type-of-the-mask'}
options={
{
// the options for your mask if needed
}
}
// dont forget to set the "value" and "onChangeText" props
value={this.state.text}
onChangeText={text => {
this.setState({
text: text
})
}}
/> Cel PhoneMask:
If you need a different formatting, use the Sample code (source): <TextInputMask
type={'cel-phone'}
options={{
maskType: 'BRL',
withDDD: true,
dddMask: '(99) '
}}
value={this.state.international}
onChangeText={text => {
this.setState({
international: text
})
}}
/> Options
MethodsYou can get the <TextInputMask
type={'cel-phone'}
options={{
maskType: 'BRL',
withDDD: true,
dddMask: '(99) '
}}
value={this.state.international}
onChangeText={text => {
this.setState({
international: text
})
}}
// add the ref to a local var
ref={(ref) => this.phoneField = ref}
/>
//...
const unmasked = this.phoneField.getRawValue()
// in the mask: (51) 98765-4321
// unmasked: 51987654321 CPFMask: Sample code (source): <TextInputMask
type={'cpf'}
value={this.state.cpf}
onChangeText={text => {
this.setState({
cpf: text
})
}}
/> MethodsYou can check if the cpf is valid by calling the <TextInputMask
type={'cpf'}
value={this.state.cpf}
onChangeText={text => {
this.setState({
cpf: text
})
}}
// add the ref to a local var
ref={(ref) => this.cpfField = ref}
/>
// get the validation
const cpfIsValid = this.cpfField.isValid()
console.log(cpfIsValid) // boolean You can get the const unmasked = this.cpfField.getRawValue()
// in the mask: 123.456.789-01
// unmasked: 12345678901 CNPJMask: Sample code (source): <TextInputMask
type={'cnpj'}
value={this.state.cnpj}
onChangeText={text => {
this.setState({
cnpj: text
})
}}
/> MethodsYou can check if the cnpj is valid by calling the <TextInputMask
type={'cnpj'}
value={this.state.cnpj}
onChangeText={text => {
this.setState({
cnpj: text
})
}}
// add the ref to a local var
ref={(ref) => this.cnpjField = ref}
/>
// get the validation
const cnpjIsValid = this.cnpjField.isValid()
console.log(cnpjIsValid) // boolean You can get the const unmasked = this.cnpjField.getRawValue()
// in the mask: 99.999.999/9999-99
// unmasked: 99999999999999 Credit CardMask:
Sample code (source) <TextInputMask
type={'credit-card'}
options={{
obfuscated: false,
issuer: 'amex'
}}
value={this.state.creditCard}
onChangeText={text => {
this.setState({
creditCard: text
})
}}
/> Options
MethodsYou can get the array containing the groups of the value value using the <TextInputMask
type={'credit-card'}
options={{
obfuscated: false,
issuer: 'amex'
}}
value={this.state.creditCard}
onChangeText={text => {
this.setState({
creditCard: text
})
}}
// add the ref to a local var
ref={(ref) => this.creditCardField = ref}
/>
//...
const unmasked = this.creditCardField.getRawValue()
// in the mask: 9874 6541 3210 9874
// unmasked: [9874, 6541, 3210, 9874] CustomMask:
Ex: Sample code (source): //
// SIMPLE
//
<TextInputMask
type={'custom'}
options={{
/**
* mask: (String | required | default '')
* the mask pattern
* 9 - accept digit.
* A - accept alpha.
* S - accept alphanumeric.
* * - accept all, EXCEPT white space.
*/
mask: '999 AAA SSS ***'
}}
value={this.state.text}
onChangeText={text => {
this.setState({
text: text
})
}}
style={textInputStype}
/>
//
// ADVANCED
//
<TextInputMask
type={'custom'}
options={{
// required
/**
* mask: (String | required | default '')
* the mask pattern
* 9 - accept digit.
* A - accept alpha.
* S - accept alphanumeric.
* * - accept all, EXCEPT white space.
*/
mask: '999 AAA SSS ***',
// optional
/**
* validator: (Function | optional | defaults returns true)
* use this funcion to inform if the inputed value is a valid value (for invalid phone numbers, for example). The isValid method use this validator.
*/
validator: function(value, settings) {
return true
},
/**
* getRawValue: (Function | optional | defaults return current masked value)
* use this function to parse and return values to use what you want.
* for example, if you want to create a phone number mask (999) 999-99-99 but want to get only
* the numbers for value, use this method for this parse step.
*/
getRawValue: function(value, settings) {
return 'my converted value';
},
/**
* translation: (Object | optional | defaults 9, A, S, *)
* the dictionary that translate mask and value.
* you can change defaults by simple override the key (9, A, S, *) or create some new.
*/
translation: {
// this is a custom translation. The others (9, A, S, *) still works.
// this translation will be merged and turns into 9, A, S, *, #.
'#': function(val) {
if (val === ' ') {
return val;
}
// if returns null, undefined or '' (empty string), the value will be ignored.
return null;
},
// in this case, we will override build-in * translation (allow all characters)
// and set this to allow only blank spaces and some special characters.
'*': function(val) {
return [' ', '#', ',', '.', '!'].indexOf(val) >= 0 ? val : null;
}
}
}}
value={this.state.text}
onChangeText={text => {
this.setState({
text: text
})
}}
style={textInputStype}
/> Options
DatetimeMask:
You can use Sample code (source): <TextInputMask
type={'datetime'}
options={{
format: 'YYYY/MM/DD'
}}
value={this.state.dt}
onChangeText={text => {
this.setState({
dt: text
})
}}
/> Options
MethodsYou can check if the date is valid by calling the <TextInputMask
type={'datetime'}
options={{
format: 'YYYY/MM/DD'
}}
value={this.state.dt}
onChangeText={text => {
this.setState({
dt: text
})
}}
// add the ref to a local var
ref={(ref) => this.datetimeField = ref}
/>
// get the validation
const isValid = this.datetimeField.isValid()
console.log(isValid) // boolean You can get the moment object from the date if it's valid calling the const momentDate = this.datetimeField.getRawValue() MoneyMask: Sample code (source): // SIMPLE
<TextInputMask
type={'money'}
value={this.state.simple}
onChangeText={text => {
this.setState({
simple: text
})
}}
/>
// ADVANCED
<TextInputMask
type={'money'}
options={{
precision: 2,
separator: ',',
delimiter: '.',
unit: 'R$',
suffixUnit: ''
}}
value={this.state.advanced}
onChangeText={text => {
this.setState({
advanced: text
})
}}
/> Options
MethodsYou can get the <TextInputMask
type={'money'}
value={this.state.simple}
onChangeText={text => {
this.setState({
simple: text
})
}
|
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论