Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-touch-device-keyboard with all npm packages installed. Try it out:

var reactTouchDeviceKeyboard = require("react-touch-device-keyboard")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-touch-device-keyboard v0.1.0

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

APITypeDescription
mountAtdom elementdom element where the keyboard should mount
marginFromInputnumbermargin top in px, from the focused input element (default 10px)
alwaysOpenbooleanif true keyboard will be alway open (default false)
widthnumberwidth of keyboard (defualt 900), this won't work if fullScreen is true
fullScreenbooleanif true, keyboard will take full width of the window
focusNextOnTabbooleanif true, on press of tab focus will go to next focusable element
disabledarray[<string>]array of keys which should be disabled (key name should be in lowecase eg. - ['tab', 'a'])
stickToBottombooleanif true keyboard will alway be in bottom of the page
onKeyPressfunctionreceives 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

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free