React virtual keyboard for touch devices. It can be used with native input/text-area element, without touching the existing code. Click here to see it in action

install

$ npm i react-touch-device-keyboard --save

use

import Keyboard from "react-touch-device-keyboard"

<Keyboard mountAt={document.getElementById("keyboard-container")}/>

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