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 :
Cheers !
Top comments (0)