# react-input-with-keyboard

> A simple input component with on-screen keyboard for react application.

Latest version **1.1.8** (published 2020-01-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-input-with-keyboard
pnpm add react-input-with-keyboard
yarn add react-input-with-keyboard
bun add react-input-with-keyboard
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.8 |
| Published | 2020-01-09 |
| First published | 2020-01-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 1 |
| Unpacked size | 748 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | samad324 |
| Maintainers | samad324 |

## Links

- npm: https://www.npmjs.com/package/react-input-with-keyboard
- Repository: https://github.com/samad324/react-input-with-keyboard
- Homepage: https://github.com/samad324/react-input-with-keyboard#readme
- Issues: https://github.com/samad324/react-input-with-keyboard/issues
- npm.io page: https://npm.io/package/react-input-with-keyboard

## Dependencies (1)

- [antd](https://npm.io/package/antd.md) ^3.22.2

## Recent versions

- 1.1.8 (latest) — 2020-01-09
- 1.1.7 — 2020-01-09
- 1.1.5 — 2020-01-09
- 1.1.4 — 2020-01-09
- 1.1.3 — 2020-01-09
- 1.1.2 — 2020-01-09
- 1.1.1 — 2020-01-09
- 1.1.0 — 2020-01-09
- 1.0.9 — 2020-01-09
- 1.0.8 — 2020-01-09
- 1.0.7 — 2020-01-09
- 1.0.6 — 2020-01-09
- 1.0.5 — 2020-01-08
- 1.0.4 — 2020-01-08
- 1.0.3 — 2020-01-08
- … 3 more at https://npm.io/package/react-input-with-keyboard/versions

## README

# React Input with Keyboard ⌨️

## Preview

![](previews/1.gif)

Watch Demo [Here](https://samad324.github.io/react-input-with-keyboard-example/)

## Installation

You can install this package with the following command:

`yarn add react-input-with-keyboard`

or

`npm install react-input-with-keyboard`

## How to use

you can also see this [example](https://github.com/samad324/react-input-with-keyboard-example)

### Usage

```js
import React, { Component } from "react";
import { TextInput, Textarea } from "react-input-with-keyboard";
import "./App.css";

// don't forget to import css file.
import "react-input-with-keyboard/dist/index.css";

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      input1Val: "",
      input2Val: "",
      input3Val: ""
    };
  }
  onChangeTextField = (key, value) => {
    this.setState({
      [key]: value
    });
  };

  render() {
    const { input1Val, input2Val, input3Val } = this.state;
    return (
      <div className="App">
        <TextInput
          text={"Input with full keyboard"}
          placeholder="Please Scan Your Badge..."
          value={input1Val}
          containerClassName="inpContainer"
          keyboardKeyClassName="keyboardKeyStyles"
          onChange={text => this.onChangeTextField("input1Val", text)}
        />
        <TextInput
          text={"Input with numaric keyboard"}
          placeholder="Please Scan Your Badge..."
          value={input2Val}
          fullKeyboard={false}
          type="number"
          keyboardKeyContainerClassName="keyContainerClass"
          containerClassName="inpContainer"
          onChange={text => this.onChangeTextField("input2Val", text)}
        />
        <Textarea
          text={"Textarea with keyboard"}
          value={input3Val}
          fullKeyboard={true}
          onChange={value => this.onChangeTextField("input3Val", value)}
          containerClassName="inpContainer"
        />
      </div>
    );
  }
}

export default App;
```

### Props

| Props                         | Type         | Notes                                                                     |
| ----------------------------- | ------------ | ------------------------------------------------------------------------- |
| containerClassName            | `string`     | className of the main Input wrapper.                                      |
| text                          | `string`     | Heading of Input.                                                         |
| textStyles                    | `string`     | Heading className                                                         |
| error                         | `bool`       | for showing error                                                         |
| inputClassName                | `string`     | input className                                                           |
| placeholder                   | `string`     | placeholder of the input                                                  |
| value                         | `string`     | value of the input                                                        |
| size                          | `string`     | size of the input, i.e. `large` `default` and `small`                     |
| onFocus                       | `function`   | callback function for onFocus event                                       |
| onBlur                        | `function`   | callback function for onBlur event                                        |
| onChange                      | `function`   | callback function for onChange event                                      |
| type                          | `string`     | type of input, i.e `text` `number` etc.                                   |
| disabled                      | `bool`       | flag for disable the input or not.                                        |
| id                            | `string`     | id for the input.                                                         |
| fullKeyboard                  | `bool`       | flag for allow full keyboard on input or just numaric keyboard            |
| hideOnSmallDevice             | `bool`       | if you want to hide keyboard icon on small devices like moble and tablets |
| keyboardIcon                  | `React.node` | icon for the keyboard, which is show on right side of the input           |
| keyboardIconColor             | `string`     | color of the keyboard icon                                                |
| iconClassName                 | `string`     | className for keyboard icon                                               |
| keyboardKeyClassName          | `string`     | className for the text inside the keyboard's key                          |
| keyboardKeyContainerClassName | `string`     | className for the keyboard's key                                          |

---
_Source: https://npm.io/package/react-input-with-keyboard · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._