Getting Started with react-simple-keyboard

Not using React.js? Click here for plain Javascript instructions.

Installation

npm install react-simple-keyboard --save

Usage

import React, {Component} from 'react';
import Keyboard from 'react-simple-keyboard';
import 'react-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)}
      />
    );
  }
}

Usage with Typescript

Types are included in react-simple-keyboard. For an example, check out the following demo:

Usage with Preact and/or Preact-compat

If you run into issues using react-simple-keyboard with Preact and/or Preact-compat, please use the core simple-keyboard.

Usage with Gatsby and similar static site generators

If you are using Gatsby or similar static site generators, it’s recommended to use the core simple-keyboard package instead.

Documentation

Discover the various options, methods and use-cases

Support development of this library: