React Virtual Keyboard

A on-screen keyboard (OSK) Component that works in the browser for reactJS. Useful for Kiosk Touchscreens.

Based on the Virtual Keyboard using jQuery: https://mottie.github.io/Keyboard/

Usage

Installation

npm install react-virtual-keyboard

Import Keyboard

import Keyboard from 'react-virtual-keyboard';

Use Keyboard Element

<Keyboard 
  value={this.state.input}
  name='keyboard'
  options={{
    type:"input",
    layout: "qwerty",
    alwaysOpen: true,
    usePreview: false,
    useWheel: false,
    stickyShift: false,
    appendLocally: true,
    color: "light",
    updateOnChange: true,
    initialFocus: true,
    display: {
      "accept" : "Submit"
    }
  }}
  onChange={this.onInputChanged}
  onAccepted={this.onInputSubmitted}
  ref={k => this.keyboard = k}
/>

Return updated values

onInputChanged = (data) => {
  this.setState({ input: data });
}

onInputSubmitted = (data) => {
  console.log("Input submitted:", data);
}

Listen for button presses

this.keyboard.interface.keyaction.enter = (base) => {
  // Enter button pressed
  // Accepting content, as an example:
  return this.keyboard.interface.keyaction.accept(base);
};

For more information, check out the API documentation: https://github.com/Mottie/Keyboard/wiki/Options

Dependencies

• React
• Webpack
• jQuery
• Mottie Keyboard