https://github.com/panarch/standalone-vexflow-context

Browser independent VexFlow context
https://github.com/panarch/standalone-vexflow-context

react-native vexflow

Last synced: 4 months ago
JSON representation

Browser independent VexFlow context

• Host: GitHub
• URL: https://github.com/panarch/standalone-vexflow-context
• Owner: panarch
• License: mit
• Created: 2017-01-31T11:13:30.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2022-09-20T23:08:33.000Z (almost 4 years ago)
• Last Synced: 2025-08-09T16:46:53.689Z (11 months ago)
• Topics: react-native, vexflow
• Language: JavaScript
• Size: 2.17 MB
• Stars: 22
• Watchers: 1
• Forks: 7
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# standalone-vexflow-context

Browser independent VexFlow context

If you want to use VexFlow on Node.js,  

=> https://github.com/panarch/node-vexflow

## Getting Started

`npm install standalone-vexflow-context`

And `react-native-svg` and `vexflow` should be installed in your host project.

Ex)

```

import { ReactNativeSVGContext, NotoFontPack } from 'standalone-vexflow-context';

...

  render() {

    const context = new ReactNativeSVGContext(NotoFontPack, { width: 400, height: 400 });

    const stave = new Stave(100, 150, 200);

    stave.setContext(context);

    stave.setClef('treble');

    stave.setTimeSignature('4/4');

    stave.draw();

    return (

      { context.render() }

    );

  }

...

```

And you can also start from this seed project, https://github.com/panarch/react-native-vexflow-seed