https://github.com/aadilhasan/react-touch-keyboard
react keyboard for touch devices
https://github.com/aadilhasan/react-touch-keyboard
Last synced: about 2 months ago
JSON representation
react keyboard for touch devices
- Host: GitHub
- URL: https://github.com/aadilhasan/react-touch-keyboard
- Owner: aadilhasan
- License: mit
- Created: 2019-01-21T18:21:04.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-08-29T11:41:10.000Z (almost 2 years ago)
- Last Synced: 2025-03-27T17:21:38.355Z (2 months ago)
- Language: TypeScript
- Homepage:
- Size: 1.08 MB
- Stars: 3
- Watchers: 4
- Forks: 3
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
React virtual keyboard for touch devices.
It can be used with native input/text-area element, without touching the existing code.
`In touch devices where keyboard is not attached web/electron apps have to rely on OS virtual keyboard which user has to manually open and close, with this app user don't have to rely on the OS keyboard anymore, the keyboard opens when a input is focused and hides when it gets blured.`
[Click here to see it in action](https://codesandbox.io/s/winter-resonance-wrh5v)
### install
```sh
$ npm i react-touch-device-keyboard --save
```
### use
```sh
import Keyboard from "react-touch-device-keyboard"
```
### APIS
| API | Type | Description |
| --------------- | ----------------- | -------------------------------------------------------------------------------------------- |
| mountAt | `dom element` | dom element where the keyboard should mount |
| marginFromInput | `number` | margin top in px, from the focused input element (default 10px) |
| alwaysOpen | `boolean` | if true keyboard will be alway open (default false) |
| width | `number` | width of keyboard (defualt 900), this won't work if fullScreen is true |
| fullScreen | `boolean` | if true, keyboard will take full width of the window |
| focusNextOnTab | boolean | if true, on press of tab focus will go to next focusable element |
| disabled | `array[]` | array of keys which should be disabled (key name should be in lowecase eg. - `['tab', 'a']`) |
| stickToBottom | `boolean` | if true keyboard will alway be in bottom of the page |
| onKeyPress | `function` | receives character pressed in keyboard as argument |
There are some life hooks also if needed -
`beforeOpen` - gets triggered every time focus changes
`afterOpen` - gets triggered every time focus changes
`beforeClose`, `afterClose`