https://github.com/akosbeke/react-canvas-fretboard

A full-featured React fretboard component built with TypeScript and canvas.
https://github.com/akosbeke/react-canvas-fretboard

canvas react typescript

Last synced: 3 days ago
JSON representation

A full-featured React fretboard component built with TypeScript and canvas.

• Host: GitHub
• URL: https://github.com/akosbeke/react-canvas-fretboard
• Owner: akosbeke
• Created: 2021-10-25T12:31:29.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-10-29T11:27:57.000Z (over 3 years ago)
• Last Synced: 2025-02-02T15:12:32.562Z (8 days ago)
• Topics: canvas, react, typescript
• Language: TypeScript
• Homepage: https://main--61791739714e7e003ac8b766.chromatic.com/
• Size: 2.04 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
[![Tests](https://github.com/akosbeke/react-canvas-fretboard/actions/workflows/tests.yml/badge.svg)](https://github.com/akosbeke/react-canvas-fretboard/actions/workflows/tests.yml)

# react-canvas-fretboard

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

# Basic Usage

JavaScript:

```jsx

import React from 'react'

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

const App = () => (

     { console.log(e, note, string) }}

    selectedNotes={[

        {

        note: 'C'

        }

    ]}

    />

)

export default App

```

TypeScript:

```tsx

import React from 'react'

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

const App: React.FC = () => (

     { console.log(e, note, string) }}

    selectedNotes={[

        {

        note: 'C'

        }

    ]}

    />

)

export default App

```

## Documentation

[Check out the full Storybook documentation here](https://main--61791739714e7e003ac8b766.chromatic.com/)

## 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`