Piano
The <Piano> component is a React wrapper around the Piano class.
Installation
pnpm add @music-ui/reactUsage
The following code renders an empty keyboard with the default Piano options:
import { Piano } from "@music-ui/react";
// don't forget to import the CSS file too!
import "@music-ui/piano/styles.css";
function App() {
return (
<main>
<Piano />
</main>
);
}Component props
A showcase of the component props:
import { Piano } from "@music-ui/react";
function App() {
return (
<main>
<Piano octaves={4} />
<Piano notes="C4 E4 G4" />
<Piano notes="C4, E4, G4" />
<Piano notes="C4 E4 G4" noteLabels="1 3 5" />
<Piano notes="C4 E4 G4" playedNotes="C4 G4" />
</main>
);
}octaves
notes
notes with different voices
notes with noteLabels
notes and playedNotes
Appearance customization
Last updated on