Introducing React Onscreen Keyboard

I needed a customizable on-screen keyboard component for a music project I'm tinkering with.

So I built react-onscreen-keyboard

You can get a basic keyboard layout just by rendering Keyboard with no props

import OnscreenKeyboard from 'react-onscreen-keyboard'

const App = () => <OnscreenKeyboard />

But you can extend this component as much as you'd like !

Supported props :

export 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;
};

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

If you need an on-screen keyboard make sure to check it out :

• Code
• CodeSandbox Demo with Button Keys

Cheers !