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.


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):



npm install react-simple-keyboard --save



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);

    return (
        onChange={input =>
        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