This is a simple TextInput
npm install @iamkoushik/kp-textinputA simple react-native implementation of TextInput.
Features
- Can be used as a Custom TextInput
- Custom Styling
- Supports Password show/hide
- Supports Label Text as TextInput Label
```
npm i @iamkoushik/kp-textinput
or yarn:
``
js
yarn add @iamkoushik/kp-textinput
javascript
import KPTextInput from '@iamkoushik/kp-textinput';const App = () => {
const [value, setValue] = useState('');
return (
textboxStyle={{ height: 48, fontSize: 14, marginTop: 12 }}
placeholder="Email Address"
textboxvalue={value}
type={"email-address"}
isPassword={false}
onChangeText={(value) => setValue(value)}
keyboardType={"default"}
labelplaceholder="Email Address"
/>
textboxStyle={{ height: 48, fontSize: 14, marginTop: 12 }}
placeholder="Email Address"
textboxvalue={value}
type={"email-address"}
isPassword={false}
onChangeText={(value) => setValue(value)}
keyboardType={"default"}
editable={false} // Can't edit now
isShowLabel={false} // Not to show the label text
/>
labelBackgroundColor="red"
customlabelStyle={{ borderRadius: 3, padding: 2 }}
labelTextColor="#fff"
textboxStyle={{ height: 48, fontSize: 15, marginTop: 12, fontWeight: 'bold' }}
placeholder="Password"
textboxvalue={value}
type={"email-address"}
isPassword={true} // To show the TextInput as Password field
onChangeText={(value) => setValue(value)}
keyboardType={"default"}
showPassword={true}
labelplaceholder="Password"
/>
)
}
`$3
| Name | Type | Description | Default
| ------------ | ------------- | ------------ |------------ |
|
textboxStyle | Object | Custom styling | {}
| `textboxvalue` | String | value of the textinput | ''
| `isPassword` | Boolean | To show as Password | false
| `isShowLabel` | Boolean | To show the label | false
| `showPassword` | Boolean | To show the eye-icon | false
| `editable` | Boolean | To restrict the edit mode | false
| onChangeText | Function (value: String) | Function called when user start typing | null
| labelBackgroundColor | String | Background color of the Label text | "#fff"
| labelTextColor` | String | Text color of the Label | "#000" If you'd like to see something added or changed to this module please open a new GitHub issue. Pull requests are always welcome.
© Koushik Paul