https://github.com/limitkr/react-abc-editor
React component for showing and writing abc notations using the Abcjs library
https://github.com/limitkr/react-abc-editor
abc-notation abcjs abcnotation react react-components
Last synced: 8 months ago
JSON representation
React component for showing and writing abc notations using the Abcjs library
- Host: GitHub
- URL: https://github.com/limitkr/react-abc-editor
- Owner: limitkr
- License: mit
- Created: 2022-03-13T09:16:25.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-08-21T18:22:43.000Z (over 2 years ago)
- Last Synced: 2025-01-20T11:11:33.576Z (about 1 year ago)
- Topics: abc-notation, abcjs, abcnotation, react, react-components
- Language: TypeScript
- Homepage:
- Size: 186 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-abc-editor
React component for showing and writing abc notations using the Abcjs library.
Thank you [@paulrosen](https://github.com/paulrosen) for creator of Abcjs library.
# Quick Start
## Install
```bash
# Using npm:
npm i react-abc-editor
# or Yarn package manager:
yarn add react-abc-editor
```
## Update (2023-08-22)
The `` 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](https://github.com/facebook/react/pull/25699)
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.tsx
import React from "react";
import { AbcTextEditor } from "react-abc-editor";
export default function App() {
return ;
}
```
### 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.
```tsx
// App.tsx
import React from "react";
import { AbcTextEditor } from "react-abc-editor";
export default function App() {
return ;
}
```
### Use predefined abc tune
If you want to use the pre-made abc notation string, assign it to the `predefinedAbcString` prop.
```tsx
// App.tsx
import 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 ;
}
```