diff --git a/README.md b/README.md index f52eed29..535c6a8a 100644 --- a/README.md +++ b/README.md @@ -5,34 +5,36 @@ This is a simple masked text (normal text and input text) component for React-Na Thanks to [vanilla-masker](https://github.com/BankFacil/vanilla-masker) =). Thanks to [moment](http://momentjs.com/) =). - ## 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) } isValid() { // isValid method returns if the inputed value is valid. // Ex: if you input 40/02/1990 30:20:20, it will return false // 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() } render() { @@ -43,31 +45,31 @@ export default class MyComponent extends Component { 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).
- +_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).
#### onChangeText Invoked after new value applied to mask. + ```jsx /** * @param {String} text the text AFTER mask is applied. @@ -81,7 +83,6 @@ onChangeText(text) { onChangeText={this.onChangeText.bind(this)} /> ``` - #### checkText Allow you to check and prevent value to be inputed. @@ -107,17 +108,17 @@ You can use this prop if you want custom text input instead native TextInput com ```jsx const Textfield = MKTextField.textfield() - .withPlaceholder('Text...') - .withStyle(styles.textfield) - .build(); + .withPlaceholder('Text...') + .withStyle(styles.textfield) + .build() - - + placeholder="Enter text to see events" +/> ``` #### customTextInputProps @@ -125,54 +126,53 @@ const Textfield = MKTextField.textfield() Some custom inputs like [react-native-textinput-effects](https://github.com/halilb/react-native-textinput-effects) have to set properties in mount time. For these types of components we use this property. ```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) - - this.state = { - birthday: '' - } - } - - render() { - return ( - - this.setState({ birthday })} - value={this.state.birthday} /> - - ); - } + constructor(props) { + super(props) + + this.state = { + birthday: '' + } + } + + render() { + return ( + + this.setState({ birthday })} + value={this.state.birthday} + /> + + ) + } } const styles = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: '#fff', - alignItems: 'center', - justifyContent: 'center', - } -}); + container: { + flex: 1, + backgroundColor: '#fff', + alignItems: 'center', + justifyContent: 'center' + } +}) ``` #### TextInput Props @@ -191,25 +191,29 @@ If you want to use the methods of the native TextInput, use the `getElement()` m export default class App extends React.Component { onGoFocus() { // when you call getElement method, the instance of native TextInput will returned. - this.refs['myText'].getElement().focus(); + this.refs['myText'].getElement().focus() } - render() { - return ( - - - - - -