react-native-text-input-with-limit-hint
This is a React-Native TextInput component, containing a hint text to below of the TextInput and the hint provides three type of count such as maximum count as limit, entered text count, and available text count.
npm install react-native-text-input-with-limit-hintUsage
import { LimitedTextInput } from 'react-native-text-input-with-limit-hint';place <LimitedTextInput> tag wherever you want to have it.
maxLength is an important Prop to ensure the limit; otherwise it'll allow unlimited inputs along with hint as entered text count.
<LimitedTextInput
maxLength={10}
onChangeText={(text) => {
console.log(text);
}}
/>Methods
| Prop | Required |
|---|---|
| onChangeText | No |
Props
Note: The component has the below custom props and also it supports all the props of TextInputProps to customize the TextInput as per the need.
| Prop | Type | default value | Description |
|---|---|---|---|
| hintStyles | TextStyle |
Specifies styles for the hint text and it can be customized as per need via TextStyle | |
| hintType |
allonly-enteredonly-availablenone
|
all |
Hint text can be configured by its type. all - It shows both entered and maximum count can be entered. For example if the hint value is 5/15, here 5 represents entered text count and 15 represents maximum length can be entered in it. |
| borderType |
all bottomnone |
all |
Specifies the type of border around the TextInput. all - Displays border at all the side with rounded radius corner. bottom - Displays border only at the bottom of the field. |
| delimiter |
/, ~, out of
|
/ |
Specifies delimiter between entered count and max count. |
Example
import * as React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import LimitedTextInput from 'react-native-text-input-with-limit-hint';
export default function App() {
return (
<View style={styles.container}>
<Text>Default hint with bottom border</Text>
<LimitedTextInput
maxLength={15}
style={styles.example1}
borderType="bottom"
/>
<Text>Hint for only-entered text</Text>
<LimitedTextInput
maxLength={15}
style={styles.example2}
hintType="only-entered"
borderType="all"
/>
<Text>Hint for only-available text</Text>
<LimitedTextInput
maxLength={15}
style={styles.example3}
hintType="only-available"
/>
<Text>Different delimiter</Text>
<LimitedTextInput
maxLength={10}
numberOfLines={2}
style={styles.example4}
multiline={true}
delimiter="~"
onChangeText={(text) => {
console.log(text);
}}
/>
<Text>Different delimiter(out of) with custom hint style</Text>
<LimitedTextInput
maxLength={500}
numberOfLines={5}
style={styles.example5}
multiline={true}
hintStyles={styles.hint}
delimiter="out of"
onChangeText={(text) => {
console.log(text);
}}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
padding: 16,
},
example1: {
flex: 1,
borderColor: 'red',
},
example2: {
flex: 1,
borderColor: 'blue',
},
example3: {
flex: 1,
},
example4: {
flex: 1,
},
example5: {
flex: 1,
},
hint: {
color: 'purple',
fontStyle: 'italic',
fontWeight: 'bold',
},
});Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT
Made with create-react-native-library