How to use simple-keyboard - 4 common examples
To help you get started, we’ve selected a few simple-keyboard examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
hodgef / react-simple-keyboard / src / lib / components / Keyboard.js View on Github 
useEffect(() => {
/**
* Initialize simple-keyboard
*/
if (!initRef.current) {
initRef.current = true;
props.debug && console.log("ReactSimpleKeyboard: Init");
keyboardRef.current = new Keyboard(`.${cssClass}`, parseProps(props));
props.keyboardRef && props.keyboardRef(keyboardRef.current);
}
/**
* Only trigger render if props changed
*/
if (propsChanged(previousProps.current, props)) {
let keyboard = keyboardRef.current;
previousProps.current = props;
keyboard.setOptions(parseProps(props));
props.debug && console.log("ReactSimpleKeyboard: Rendered");
}
}, [initRef, cssClass, previousProps, props]);onDOMLoaded = async () => {
this.keyboard = new Keyboard({
debug: true,
onChange: input => this.onChange(input),
onKeyPress: button => this.onKeyPress(button),
newLineOnEnter: true,
layout: layout
});
/**
* Adding preview (demo only)
*/
document.querySelector(".simple-keyboard").insertAdjacentHTML(
"beforebegin",
`
<div class="simple-keyboard-preview">
<textarea readonly="" class="input"></textarea>
</div>simple-keyboard
On-screen Javascript Virtual Keyboard
