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.

github hodgef / react-simple-keyboard / src / lib / components / Keyboard.js View on Github external
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]);
github hodgef / simple-keyboard-layouts / src / demo / App.js View on Github external
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

MIT
Latest version published 4 days ago

Package Health Score

86 / 100
Full package analysis

Popular simple-keyboard functions