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
$ npm i react-touch-device-keyboard --saveimport Keyboard from "react-touch-device-keyboard"
<Keyboard mountAt={document.getElementById("keyboard-container")}/>| 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[<string>] |
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