React component for showing and writing abc notations using the Abcjs library
npm install react-abc-editorReact component for showing and writing abc notations using the Abcjs library.
Thank you @paulrosen for creator of Abcjs library.
``bash`Using npm:
npm i react-abc-editoror Yarn package manager:
yarn add react-abc-editor
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
`tsx
// App.tsximport React from "react";
import { AbcTextEditor } from "react-abc-editor";
export default function App() {
return ;
}
`$3
If you want to TextEditor as read-only, set
allowEdit to false for disable textarea, and set allowClick to false for disable click event.`tsx
// App.tsximport React from "react";
import { AbcTextEditor } from "react-abc-editor";
export default function App() {
return ;
}
`$3
If you want to use the pre-made abc notation string, assign it to the
predefinedAbcString prop.`tsx
// App.tsximport React from "react";
import { AbcTextEditor } from "react-abc-editor";
const tune = "X: 1\nT: Cooley's\nM: 4/4\nL: 1/8\nK: Emin\n|:D2|"Em"EBBA B2 EB||"
export default function App() {
return ;
}
`Use Abcjs render options
`tsx
interface TextEditorProps {
options?: Omit;
}
`Not required. However, you can set the
options prop for advanced settings to visualizing score.`tsx
import React from "react";
import { AbcTextEditor } from "react-abc-editor";export default function App() {
return ;
}
``