React hooks and components for piano.
const { keyboard } = usePiano({
keyRange,
onKeyDown,
onKeyUp,
});
keyRange: [string | number, string | number]
- Default:
['C3', 'G5']
- The range of keys to be displayed.
- Default:
onKeyDown: (note: Note) => void
- Default:
() => {}
- A callback function that is called when a key is pressed.
- Default:
onKeyUp: (note: Note) => void
- Default:
() => {}
- A callback function that is called when a key is released.
- Default:
<Piano
keyboard={keyboard}
pianoStyles={{
direction,
keyGap,
}}
keyStyles={{
keyWidth,
keyHeight,
whiteKeyColor,
whiteKeyActiveColor,
whiteKeyBorderColor,
whiteKeyBorderRadius,
blackKeyColor,
blackKeyActiveColor,
blackKeyBorderColor,
blackKeyBorderRadius,
}}
/>