Piano

Customizable piano component.

Source

Import

import { noteNumber, noteName } from '@tremolo-ui/functions'
import {
  BlackKey,
  KeyLabel,
  Piano,
  SHORTCUTS,
  WhiteKey
} from '@tremolo-ui/react'

Examples

Basic

Loading...

function App() {
  return (
    <div
      style={{
        width: '100%',
        height: 160,
        margin: 'auto',
        padding: 10,
      }}
    >
      <Piano
        noteRange={{ first: noteNumber('C3'), last: noteNumber('B4') }}
        keyboardShortcuts={SHORTCUTS.HOME_ROW}
        fill
        // Notice: need optional chaining (?.)
        label={(_, i) => SHORTCUTS.HOME_ROW.keys[i]?.toUpperCase()}
      />
    </div>
  )
}