react-canvas-fretboard
v0.2.2
Published
A full-featured React component built with TypeScript and canvas.
Downloads
5
Readme
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