fretboard component

[devboell]

Hi, I just finished the first version of a reusable fretboard component.
Please have a look: https://github.com/devboell/react-fretboard
If you have any questions/suggestions or any other feedback, let me know!

[danigb]

Hi @devboell,

First of all, thanks a lot for your work! I think a react-fretboard could be very useful (for certain applications ;-)

Said that I find two major issues:

1. First of all, I would love to have a more graphic oriented version instead of the div-box version you created. I would love that it looks like the typical fretboards you can find in, for example, paper books. I think that can be achieved by producing SVG instead HTML tags.

2. I find weird that you have to use a function to create the parameters. So instead of:

<Fretboard fretMatrix={fretMatrixForChord(tuning, width, 'Cmaj7', true)}

I would prefer:

<Fretboard width={width} tuning={tuning} notes={Tonal.chord("Cmaj7")} showName={true} />

I find that two major advantages:

1. Make react-fretboard independent of Tonal (or at least, with a little dependency). You get the chord notes from tonal and display it on the fretboard.
2. Make all parameters explicit. For example, I have to look the documentation to know what the last true of fretMatrixForChord it used to.

I hope you find this as constructive advice. I'm open to other suggestions or points of view.

[devboell]

Hey, thanks for the feedback.

I understand your points, and I guess the reason I made it like this is because it is an adaptation of a more interactive, clickable fretboard. Let me explain by addressing your points:

a more graphic oriented version instead of the div-box version

If you check the fretboard trainer, the user is constantly clicking frets, and receiving feedback. With these div boxes it is very clear where exactly he has to click. This is even more important when the user wants to click (or tap on a tablet) as fast as possible. So I made it like this (also because it is easier) and at first I also didn't like it much, but I became quite used to it.
However, it should be possible to offer both. Have two different view modes, one divs and one svg, and let the user decide. I will think about how to do it, but I can't promise this for the very near future. (btw, could you point me to an example of what you consider a typical fretboard diagram?)

have to use a function to create the parameters

I thought that offering these functions would make it a bit more user friendly. In a way, it makes it less dependant on tonal from the component-consumer perspective, because he/she can just install and use the react-fretboard without having to also install Tonal.
Another reason is also the interactiveness. In the code I already started with allowing a clickAction function that returns the note and location of the click. Based on that the user can set the colour (fretStatus) of a certain fret by using a updateFretMatrix(location, fretStatus) function (which is also ready). So it make more sense to me to have a fretMatrix object in the javascript code, so the user can update it and have more flexibility in selected and naming frets.
A third reason is, that because I want to extend the api, the number of props would grow too big. I think I prefer to group everything that has to do with the fretMatrix, and pass it as a single prop.

But I will think about this some more, maybe it should just stay a display-only fretboard ... I am not sure.

I also intend to expand the theming options, like fret border (colour, radius), font-family, font-size. Do you have some ideas of what you want to see included there? (edit: oh wait, you want an svg ui, so that doesn't apply to you :-)

[devboell]

to make a long story short: the fretMatrix is basically the fretboard's state, which the user might want to keep in the parent component's state or in a redux store. This is useful for an interactive fretboard but maybe less useful for your purposes.

[devboell]

Hi Dani,
I've been working on the fretboard again, and am reaching the point of a new release. I took your suggestions on board, so if you're still interested, please have a look.

[danigb]

Wow! Your demo has a much better look right now! 👍 Very nice work! I would like to integrate this into tonal demo. I'll get in touch when I have time to do it!

Thanks for sharing!