Skip to Content
ReactFretboard DiagramsFretboard

Fretboard

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

Installation

pnpm add @music-ui/react

Usage

The following code renders an empty fretboard with the default Fretboard options:

import { Fretboard } from "@music-ui/react";
 
function App() {
  return (
    <main>
      <h1>My App</h1>
      {/* rest of your app */}
      <Fretboard />
    </main>
  );
}

Output:

Check the complete Fretboard component reference for more details.

Component props

In addition to the Fretboard class constructor options, the component accepts the following props:

NameTypeDefault ValueDescription
idstringThe fretboard unique identifier
classNamestringThe component class name
textProperty"note" | "degree" | "interval"The position property to display

Props showcase

A showcase of the component props:

import { Fretboard } from "@music-ui/react";
 
const cMajorArpeggio = [
  { string: 6, fret: 0, note: "E" },
  { string: 6, fret: 3, note: "G" },
  { string: 5, fret: 3, note: "C" },
  { string: 4, fret: 2, note: "E" },
  { string: 3, fret: 0, note: "G" },
  { string: 2, fret: 1, note: "C" },
  { string: 1, fret: 0, note: "E" },
  { string: 1, fret: 3, note: "G" },
];
 
function App() {
  return (
    <>
      <Fretboard positions={cMajorArpeggio} fretCount={3} width={300} />
      <Fretboard
        positions={cMajorArpeggio}
        width={600}
        fretCount={5}
        textProperty="note"
      />
      <Fretboard
        positions={cMajorArpeggio}
        width={600}
        fretCount={5}
        textProperty="note"
        style={{
          fill: ({ note }) => (note === "C" ? "orange" : "white"),
        }}
      />
    </>
  );
}

positions, fretCount and width

textProperty

textProperty and style for highlighting root notes

Last updated on
ChordWithPlayerScale