keyboard.tsx

import * as React from "react";

export class Keyboard extends React.Component {
  state = { key: null };

  onChange = event => {
    this.setState({ key: event.target.value });
  };

  render() {
    return (
      <div style={style}>
        <div>
          <input value={this.state.key} onChange={this.onChange} />
          <br />
          {this.state.key || "Type Something!"}
        </div>
      </div>
    );
  }
}

const style: React.CSSProperties = {
  height: "100%",
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  textAlign: "center",
  color: "#8855FF",
  background: "rgba(136, 85, 255, 0.1)",
  overflow: "hidden"
};