react-canvas-fretboard v0.2.2

react-canvas-fretboard

A powerful full-size fretboard component for creating interactive tools for guitar or other stringed instruments.

Basic Usage

JavaScript:

import React from 'react'
import {Fretboard} from 'react-canvas-fretboard'

const App = () => (
    <Fretboard
    onFretboardClick={(e, note, string) => { console.log(e, note, string) }}
    selectedNotes={[
        {
        note: 'C'
        }
    ]}
    />
)

export default App

TypeScript:

import React from 'react'
import {Fretboard} from 'react-canvas-fretboard'

const App: React.FC = () => (
    <Fretboard
    onFretboardClick={(e, note, string) => { console.log(e, note, string) }}
    selectedNotes={[
        {
        note: 'C'
        }
    ]}
    />
)

export default App

Documentation

Check out the full Storybook documentation here

Development

This project uses Storybook for development which can be run by

yarn storybook

or

npm run storybook

which runs a development server in the browser.

CI/CD

Testing, building and publishing to NPM will be automatic using Github Actions.

Testing

yarn test

or

npm t