Skip to content

Utzel-Butzel/react-virtual-keyboard

Repository files navigation

DEPRECATED

React Virtual Keyboard

Project is outdated!

Please use https://virtual-keyboard.js.org/react/ instead

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

Packages

 
 
 

Contributors