# react-native-vexflow-canvas

> Canvas Element & SVGContext for using VexFlow in React Native.

Latest version **1.0.9** (published 2022-09-26) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-native-vexflow-canvas
pnpm add react-native-vexflow-canvas
yarn add react-native-vexflow-canvas
bun add react-native-vexflow-canvas
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.9 |
| Published | 2022-09-26 |
| First published | 2022-09-24 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 7.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Eren Yenigül |
| Maintainers | erenyenigul |
| Keywords | VexFlow, React, Native, Vex, Music, Notation, Canvas |

## Links

- npm: https://www.npmjs.com/package/react-native-vexflow-canvas
- Repository: https://github.com/erenyenigul/react-native-vexflow-canvas
- Homepage: https://github.com/erenyenigul/react-native-vexflow-canvas#readme
- Issues: https://github.com/erenyenigul/react-native-vexflow-canvas/issues
- npm.io page: https://npm.io/package/react-native-vexflow-canvas

## Dependencies (1)

- [vexflow](https://npm.io/package/vexflow.md) ^4.0.3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.9 (latest) — 2022-09-26
- 1.0.8 — 2022-09-26
- 1.0.7 — 2022-09-24
- 1.0.6 — 2022-09-24
- 1.0.5 — 2022-09-24
- 1.0.3 — 2022-09-24
- 1.0.2 — 2022-09-24
- 1.0.0 — 2022-09-24

## README

# react-native-vexflow-canvas 🎇

This a simple package that enables using VexFlow in React Native. Below, you can find an example on how to use ``VexCanvas``. If you like, you can also read the small documentation which is also down below.

## Example usage: 

```js
import VexCanvas from "react-native-vexflow-canvas";

// some other imports... 

const MyVexView = () => {
    const draw = (ref) => {
        const context = ref.getContext(); // get the context from the canvas.
        context.clear(); // To have a clean canvas in every render.

        /*
            Your VexFlow Code After Here
        */

        const stave = new Stave(0, 0, 250, 250);

        stave.setContext(context);
        stave.draw();
    };

    return (<View>
                <VexCanvas
                    draw={draw} // this prop allows access to Canvas, and thus the context. Pass a function to it.
                ></VexCanvas>
            </View>
    );
};

```

## Documentation 📑

The package provides two main utilities: ``VexCanvas`` and ``RNVexFlowSVGContext``.

### VexCanvas

| Prop | Descripton |
|----|----|
| width | width  of the canvas.|
| height | height  of the canvas.|
| draw | callback function which takes a reference to canvas. you can use it to access the context. |


| Method | Descripton |
|----|----|
| getContext() | returns the context (```RNVexFlowSVGContext```).|

### RNVexFlowSVGContext

This is a class that VexFlow will use to create a SVG element (react-native-svg). 

| Method | Descripton |
|----|----|
| render() | returns a React element that is filled with correct SVG elements (like text, path etc.) |

There are other methods of ```RNVexFlowSVGContext``` that are only used by VexFlow to fill the canvas. You can check them out in the source code.

---
_Source: https://npm.io/package/react-native-vexflow-canvas · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._