Interface: PianoProps
Defined in: react/src/components/Piano/index.tsx:54
Properties
actionsRef?
optional actionsRef?: Ref<PianoMethods>;
Defined in: react/src/components/Piano/index.tsx:168
Receives playNote and stopNote, which press and release a key as the
pointer or the keyboard would. ref reaches the root element itself.
blackKeyHeightRatio?
optional blackKeyHeightRatio?: number;
Defined in: react/src/components/Piano/index.tsx:130
Height of a black key, as a fraction of the height of the keyboard.
Default
0.6
blackKeyWidthRatio?
optional blackKeyWidthRatio?: number;
Defined in: react/src/components/Piano/index.tsx:125
Width of a black key, as a fraction of PianoProps.whiteKeyWidth.
Default
0.65
classes?
optional classes?: object;
Defined in: react/src/components/Piano/index.tsx:60
Classes for what a key draws inside itself: keyLabelWrapper, and
keyLabel around what label returns. The key itself takes a class
through keyProps, which is also where the note and its state are.
keyLabel?
optional keyLabel?: string;
keyLabelWrapper?
optional keyLabelWrapper?: string;
glissando?
optional glissando?: boolean;
Defined in: react/src/components/Piano/index.tsx:77
Let a pointer slide from one key to the next while it is down. With it off, the key that was pressed sounds until the pointer is released.
Default
true
keyboardShortcuts?
optional keyboardShortcuts?: KeyboardShortcuts;
Defined in: react/src/components/Piano/index.tsx:91
Play notes from the computer keyboard: keys[i] plays
noteRange.first + i. SHORTCUTS has ready-made layouts, which assume
noteRange.first is a C. Where they listen is keyboardShortcutsScope.
keyboardShortcutsScope?
optional keyboardShortcutsScope?: KeyboardShortcutsScope;
Defined in: react/src/components/Piano/index.tsx:100
Where keyboard shortcuts listen. root handles keys only while the Piano
root or one of its descendants has focus; window handles them anywhere
on the page except in editable elements.
Default
'root'
keyGap?
optional keyGap?: number;
Defined in: react/src/components/Piano/index.tsx:120
Space between two white keys, in pixels.
Default
1
keyProps?
optional keyProps?: (note, state) => KeyAttributes;
Defined in: react/src/components/Piano/index.tsx:152
Extra props for one key, by note: a class, a style, a data-* attribute
to select on.
The geometry of the key (left, width, height) is applied after the
returned style and cannot be overridden, so a key cannot be drawn
somewhere other than where it responds.
Parameters
| Parameter | Type |
|---|---|
note | number |
state | KeyState |
Returns
Example
highlight the notes of a scale
keyProps={(note) => ({ 'data-in-scale': inScale(note, root, 'major') ? '' : undefined })}
label?
optional label?: (note, state) => ReactNode;
Defined in: react/src/components/Piano/index.tsx:137
What to draw inside a key. '', null and undefined leave it bare, so
a layout with gaps — SHORTCUTS.HOME_ROW_NATURAL, say — needs no
special casing.
Parameters
| Parameter | Type |
|---|---|
note | number |
state | KeyState |
Returns
ReactNode
midiMax?
optional midiMax?: number;
Defined in: react/src/components/Piano/index.tsx:84
Highest note that can sound. Keys above it carry data-disabled.
Default
127
noteRange
noteRange: NoteRange;
Defined in: react/src/components/Piano/index.tsx:69
The notes to draw keys for, as MIDI note numbers from first to last,
both included.
onPlayNote?
optional onPlayNote?: (note, velocity?) => void;
Defined in: react/src/components/Piano/index.tsx:160
Called when a note starts sounding, whether a pointer, a keyboard shortcut
or playNote asked for it. A note held by several of them at once is
reported once. velocity is what playNote was given, and undefined
otherwise.
Parameters
| Parameter | Type |
|---|---|
note | number |
velocity? | number |
Returns
void
onStopNote?
optional onStopNote?: (note) => void;
Defined in: react/src/components/Piano/index.tsx:162
Called once everything holding a note has let go of it.
Parameters
| Parameter | Type |
|---|---|
note | number |
Returns
void
resizable?
optional resizable?: boolean;
Defined in: react/src/components/Piano/index.tsx:108
Follow the width of the parent element, deriving the width of a white key from it. PianoProps.whiteKeyWidth is ignored.
Default
false
whiteKeyWidth?
optional whiteKeyWidth?: number;
Defined in: react/src/components/Piano/index.tsx:115
Width of a white key in pixels, not counting keyGap. Ignored while
resizable is on.
Default
40