React-music-score NPM

react-music-score

A music score editor component for React using Vexflow and MusicXML

Install

npm install --save react-music-score

Usage

import React, { Component } from 'react';

import ScoreEditor from 'react-music-score';
import 'react-music-score/dist/index.css';

class Example extends Component {
  render() {
    return <ScoreEditor />;
  }
}

Using this with Next.js? Because of the Vexflow dependency not working in Node.js, you need to dynamically import this component, to prevent SSR

import dynamic from "next/dynamic";

const ScoreEditor = dynamic(() =>
  import("react-music-score")
    .then((mod) => mod.ScoreEditor)
    .catch((e) => {
      // will throw server side - ignore this
      return null;
    })
);

....