Integrating a Virtual Keyboard for React, without the hassle

As a React developer, I sometimes scramble to find React plugins without an extra library attached. For instance, one day I was looking for a react virtual keyboard, but struggled to find one without jQuery. To make our collective developer lives easier, I came up with a lightweight virtual keyboard that gets the job done without extra dependencies.

Enter react-simple-keyboard, a lightweight react virtual keyboard :

React-simple-keyboard is a screen keyboard with simplicity at its core. This goes beyond the “simple” in the name. Indeed, the ease of setup and usage make this a very easy virtual keyboard to add to a project.

Let’s take a look at the set-up (per the Getting Started guide):

Installation:

npm install react-simple-keyboard --save

Usage:

import React, {Component} from 'react';
import Keyboard from 'react-simple-keyboard';
import 'simple-keyboard/build/css/index.css';

class App extends Component {

  onChange = (input) => {
    console.log("Input changed", input);
  }

  onKeyPress = (button) => {
    console.log("Button pressed", button);
  }

  render(){
    return (
      <Keyboard
        onChange={input =>
          this.onChange(input)}
        onKeyPress={button =>
          this.onKeyPress(button)}
      />
    );
  }
}

With this little bit of setup, we get a snappy react screen keyboard that is highly customizable.

Feel free to check out the docs to learn the different settings available to you.

Happy typing !