# @iamkoushik/kp-textinput

> This is a simple TextInput

Latest version **1.0.27** (published 2021-11-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install @iamkoushik/kp-textinput
pnpm add @iamkoushik/kp-textinput
yarn add @iamkoushik/kp-textinput
bun add @iamkoushik/kp-textinput
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.27 |
| Published | 2021-11-01 |
| First published | 2021-10-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 32.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Koushik Paul |
| Maintainers | iamkoushik |
| Keywords | TextInput, KPTextInput, CustomTextInput |

## Links

- npm: https://www.npmjs.com/package/@iamkoushik/kp-textinput
- Repository: https://github.com/Koushik26011997/KPTextInput
- Homepage: https://github.com/Koushik26011997/KPTextInput#readme
- Issues: https://github.com/Koushik26011997/KPTextInput/issues
- npm.io page: https://npm.io/package/@iamkoushik/kp-textinput

## Recent versions

- 1.0.27 (latest) — 2021-11-01
- 1.0.26 — 2021-10-30
- 1.0.25 — 2021-10-29
- 1.0.24 — 2021-10-28
- 1.0.23 — 2021-10-28
- 1.0.22 — 2021-10-28
- 1.0.21 — 2021-10-28
- 1.0.20 — 2021-10-28
- 1.0.19 — 2021-10-28
- 1.0.18 — 2021-10-28
- 1.0.17 — 2021-10-28
- 1.0.16 — 2021-10-28
- 1.0.15 — 2021-10-28
- 1.0.14 — 2021-10-28
- 1.0.13 — 2021-10-28
- … 13 more at https://npm.io/package/@iamkoushik/kp-textinput/versions

## README

# KPTextInput

A 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


![Image1](https://raw.githubusercontent.com/Koushik26011997/KPTextInput/koushik/kp-textinput-package/images/image1.png)

## Getting started
Install the library using either Yarn:


```
npm i @iamkoushik/kp-textinput
```

or yarn:


```
js
yarn add @iamkoushik/kp-textinput
```


### Usage
```javascript
import KPTextInput from '@iamkoushik/kp-textinput';

const App = () => {

const [value, setValue] = useState('');

  return (
    <View>
      <KPTextInput
            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"
          />

          <KPTextInput
            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
          />

          <KPTextInput
            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"
      />
    </View>
  )
}
```

### Properties

| 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" 


### Contributing

If you'd like to see something added or changed to this module please open a new GitHub issue. Pull requests are always welcome.

### License

 © Koushik Paul

---
_Source: https://npm.io/package/@iamkoushik/kp-textinput · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._