Piano

The <Piano> React component is a wrapper around the Piano class.

Installation


pnpm add @music-ui/react


npm install @music-ui/react


yarn add @music-ui/react

Usage

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>
      <h1>My App</h1>
      {/* rest of your app */}
      <Piano />
    </main>
  );
}

Output:

Check the complete Piano component reference for more details.

Component props

The component accepts the following props:

Name	Type	Default Value	Description
`notes`	`string` \| `string[]`		The highlighted notes
`noteLabels`	`string` \| `string[]`		The highlighted notes labels
`playedNotes`	`string` \| `string[]`		The notes being currently played
`startOctave`	`number`	3	The first rendered octave
`octaves`	`number`	2	The count of rendered octaves
`withFinalC`	`boolean`	true	Renders a final C key after the last octave
`showOctaves`	`boolean`	false	Shows current octave on every C note
`id`	`string`		The piano unique identifier
`className`	`string`		The component class name

Props showcase

A showcase of the component props:


import { Piano } from "@music-ui/react";
import "@music-ui/piano/styles.css";
 
function App() {
  return (
    <>
      <Piano octaves={4} showOctaves />
      <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" />
    </>
  );
}

`octaves`

`notes`

`notes` with different voices

`notes` with `noteLabels`

`notes` and `playedNotes`

Appearance customization

See JavaScript section.