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,
}}
/>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent