React Setup

Getting Started

npm install react-simple-keyboard --save

Usage

1import React, { Component } from 'react';
2import Keyboard from 'react-simple-keyboard';
3import 'react-simple-keyboard/build/css/index.css';
4 
5class App extends Component {
6  onChange = (input) => {
7    console.log("Input changed", input);
8  }
9 
10  onKeyPress = (button) => {
11    console.log("Button pressed", button);
12  }
13 
14  render(){
15    return (
16      <Keyboard
17        onChange={this.onChange}
18        onKeyPress={this.onKeyPress}
19      />
20    );
21  }
22}

Demos: View Demo

Usage with React Hooks / Function components

React Hooks compatibility has landed as of version 2.x. Most demos however are still in the form of class components. If you’d like to integrate react-simple-keyboard in a function component, check out this demo:

Demos: View Demo

Usage with Typescript

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

For Typescript + React Hooks :

Demos: View Demo

For Typescript + Class Components:

Demos: View 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.

Demos: View Demo

Usage with Gatsby and similar static site generators (SSR)

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

Demos: View Demo

More demos

Multi-platform showcase