react-abc-editor

React component for showing and writing abc notations using the Abcjs library.
Thank you @paulrosen for creator of Abcjs library.

Quick Start

Install

# Using npm:
npm i react-abc-editor
# or Yarn package manager:
yarn add react-abc-editor

Update (2023-08-22)

The <AbcTextEditor /> component is scheduled to be deprecated in the next major release for the following two reasons:

1. The React team is planning to discontinue support for defaultProps. see pull requests
2. The current component structure is deemed difficult to extend.

The new component will additionally support the following features:

1. Styling
2. Interactive Editor

Basic Usage

// App.tsximportReactfrom"react";import{AbcTextEditor}from"react-abc-editor";exportdefaultfunctionApp(){return<AbcTextEditor/>;}

Disable Edit mode and Click event

If you want to TextEditor as read-only, set allowEdit to false for disable textarea, and set allowClick to false for disable click event.

// App.tsximportReactfrom"react";import{AbcTextEditor}from"react-abc-editor";exportdefaultfunctionApp(){return<AbcTextEditorallowEdit={false}allowClick={false}/>;}

Use predefined abc tune

If you want to use the pre-made abc notation string, assign it to the predefinedAbcString prop.

// App.tsximportReactfrom"react";import{AbcTextEditor}from"react-abc-editor";consttune="X: 1\nT: Cooley's\nM: 4/4\nL: 1/8\nK: Emin\n|:D2|"Em"EBBA B2 EB||"exportdefaultfunctionApp(){return<AbcTextEditorpredefinedAbcString={tune}/>;}

Use Abcjs render options

interfaceTextEditorProps{options?: Omit<AbcVisualParams,"selectTypes"|"dragging">;}

Not required. However, you can set the options prop for advanced settings to visualizing score.

importReactfrom"react";import{AbcTextEditor}from"react-abc-editor";exportdefaultfunctionApp(){return<AbcTextEditoroptions={{draggingColor: "orange"}}/>;}