Adding a React Virtual Keyboard, Without the Tears

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. While legacy projects bring the maturity and the quantity of add-ons, oftentimes we just want a lightweight solution that gets the job done.

 

Enter react-simple-keyboard, a “diet” react virtual keyboard

 

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 (as 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 !

Share your thoughts