React Sheet Music

React component to render interactive sheet music using ABC notation. Powered by ABC JS under the hood.

Work in progress

Install

$ npm install @slnsw/react-sheet-music

Usage

import SheetMusic from 'react-sheet-music';

const MyComponent = () => {
  return (
    <SheetMusic
      // Textual representation of music in ABC notation
      // The string below will show four crotchets in one bar
      notation="|EGBF|"
    />
  );
};

Props

Prop	Type	Description
notation	string	Textual representation of music in ABC notation
isPlaying	boolean	If playing, the notes will highlight and onBeat, onEvent and onLineEnd callbacks will run
responsive	string	Undefined or 'resize'
className	string	Custom class name to add to sheet music div
onClick	function	Callback for when any part of the sheet music is clicked on
onBeat	function
onEvent	function
onLineEnd	function

Development

# Install packages for this component
$ npm install
# This builds the component in watch mode
$ npm start

# Open up a new terminal window and go to repo location
$ cd example
# Install packages for example app
$ npm install
# Test out component in app
$ npm start