Fingerboard

A simple guitar fingerboard component used to prompt fingering.

📦 Install

$ yarn add fingerboard

🔨 Usage

// import fingerboard component and stylesheet
import Fingerboard from 'fingerboard'
import 'fingerboard/dist/index.min.css'

const App = () => (
  <>
    <Fingerboard data={[ {string: 1, fret: 1} ]} />
  </>
)

📖 API

Property	Description	Type	Default
data	data record to be displayed	point | point[] (point: {'string': number, 'fret': number})	[]
className	container class name	string	''
fretMark	if fret show mark number	'default' | 'all' | null	'default'
fretWidth	width of fret	number	72

⌨️ Development

$ git clone https://github.com/z7w7/fingerboard.git
$ cd fingerboard
$ yarn
$ yarn link & yarn dev

$ yarn link fingerboard # in another project