1.0.5 • Published 3 years ago
react-native-character-input v1.0.5
react-native-character-input
Getting started
$ npm install react-native-character-input --save
Import
import CharacterInput from 'react-native-character-input'
Usage
<CharacterInput
placeHolder='YYYY/MM/DD'
showCharBinary='1111011011'
handleChange={(value) => setValue(value)}
inputType='underlined'
keyboardType='numeric'
/>
<CharacterInput
placeHolder='YYYY/MM/DD'
showCharBinary='1111011011'
handleChange={(value) => setValue(value)}
inputType='outlined'
keyboardType='numeric'
/>
<CharacterInput
placeHolder='YYYY/MM/DD'
showCharBinary='1111011011'
handleChange={(value) => setValue(value)}
inputType='contained'
keyboardType='numeric'
/>Available Props
| Name | Type | Required? | Description |
|---|---|---|---|
| placeHolder | string | yes | String of place holder characters. |
| showCharBinary | string | yes | String of 1 or 0, indicates if corresponding character should be editable or not |
| handleChange | function(value: string) => void | yes | Returns a string of modifiable characters (1) stripped of disabled characters (0). |
| keyboardType | string | no | Same as TextInput component from react-native |
| inputType | string | no | Default underlined, Options include: underlined, outlined, and contained |
| permanentTextStyle | StyleSheet | no | Styles Text component of disabled characters |
| containerStyle | StyleSheet | no | Contained style of each character input |
| inputStyle | StyleSheet | no | Input style of each character input |
| inputContainerStyle | StyleSheet | no | Input container style of each character input |
| placeHolderTextColor | StyleSheet | no | Place holder text color |
| autoFocus | boolean | no | auto focus on first character input |
Features to come
1) handleChange function will return both stripped and raw input values(both modifiable and disabled characters). 2) Allow masked character inputs. - Will implement a way to specify an object of keys to REGEX values. - This will allow you to specify a mask string of keys/permanent characters. Permanent characters are not mapped as keys and keys have an associated REGEX as its rule to change the character input value. - This one will take me a while :)