00mjk / react-touch-keyboard

react keyboard for touch devices

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

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