React On Screen Keyboard

A completely customisable react on screen keyboard.

Install

  yarn add react-onscreen-keyboard
  # Or
  npm i react-onscreen-keyboard

Usage

import * as ReactDOM from "react-dom";
import * as React from "react";
import Keyboard from "react-onscreen-keyboard";

ReactDOM.render(
  <Keyboard
    width={900}
    keyStyle={{
      background: "rgba(0,12,12,0.3)",
      borderRadius: "50%"
    }}
  />,
  document.getElementById("app")
);

Props

• width?: number
• height?: number;
• keyWidth?: number;
• rowHeightPercent?: number;
• rowWidthPercent?: number;
• verticalMargin?: number;
• horizontalMargin?: number;
• overrides?: Map<string, (p: KeyboardKeyProps) => JSX.Element>;
• keyboardKeys?: KeyboardKeyVal[][];
• renderKey?: (p: KeyboardKeyProps) => JSX.Element;
• rowStyle?: React.CSSProperties;
• keyStyle?: React.CSSProperties;

type KeyboardProps = {
  width?: number;
  height?: number;
  keyWidth?: number;
  rowHeightPercent?: number;
  rowWidthPercent?: number;
  verticalMargin?: number;
  horizontalMargin?: number;
  overrides?: Map<
    string,
    (
      props: {
        val: KeyboardKeyVal;
        rowHeight: number;
      }
    ) => any
  >;
  keyboardKeys?: KeyboardKeyVal[][];
  renderKey?: (p: KeyboardKeyProps) => any;
  rowStyle?: React.CSSProperties;
  keyStyle?: React.CSSProperties;
};

type KeyboardKeyVal = {
  value: KeyboardEvent["code"] | KeyboardEvent["code"][];
  id: string | string[];
  width: number;
  // https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code
  code: string | string[];
};