0.1.0 • Published 5 years ago
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 --saveuse
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
0.1.0
5 years ago