# react-abc-editor

React component for showing and writing abc notations using the Abcjs library.<br>
Thank you @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
```

### Storybook Preview

You can testing on storybook. just simply run:

```bash
yarn storybook
```

### Basic Usage

```tsx
// App.tsx

import React from "react";
import { AbcTextEditor } from "react-abc-editor";

export default function App() {
  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.

```tsx
// App.tsx

import React from "react";
import { AbcTextEditor } from "react-abc-editor";

export default function App() {
  return <AbcTextEditor allowEdit={false} allowClick={false} />;
}
```

### 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 <AbcTextEditor predefinedAbcString={tune} />;
}
```
