Skip to Content
ReactMusic NotationABCScore

ABCScore

The <ABCScore> React component renders ABC notation on screen.

Installation

pnpm add @music-ui/react

Usage

The following code renders a score with the passed notes:

import { ABCScore } from "@music-ui/react";
import '@music-ui/abc/styles.css';
 
function App() {
  return (
    <main>
      <h1>My App</h1>
      {/* rest of your app */}
      <ABCScore>
        CDEF GABc|
      </ABCScore>
    </main>
  );
}

Output:

Without time signature:

With free tempo:

Component props

The component accepts the following props:

NameTypeDefault ValueDescription
childrenstringThe abc notation content
showTempobooleantrueDisplays or hides the score tempo indicator
showTimeSignaturebooleantrueDisplays or hides the time signature
abcOptionsobjectDEFAULT_ABC_VISUAL_PARAMSThe options passed to the abcjs renderer
idstringThe score unique identifier
classNamestringThe component class name

Props showcase

A showcase of the component props:

import { ABCScore } from "@music-ui/react";
import "@music-ui/abc/styles.css";
 
function App() {
  return (
    <>
      <ABCScore showTempo={false}>
        CDEF GABc|
      </ABCScore>
      <ABCScore showTimeSignature={false}>
        CDEF GABc|
      </ABCScore>
      <ABCScore abcOptions={{ foregroundColor: "orange" }}>
        CDEF GABc|
      </ABCScore>
    </>
  );
}

showTempo

showTimeSignature

abcOptions

Last updated on
ScaleABCScoreWithPlayer