react-fretboard-diagram

A React component to display a fretboard

Usage no npm install needed!

<script type="module">
  import reactFretboardDiagram from 'https://cdn.skypack.dev/react-fretboard-diagram';
</script>

README

react-fretboard-diagram

A React component to build SVG fretboard diagrams

Strings numbering

For the user: strings are numbered starting at 1 and from the lowest pitched to the highest pitched.

Implementation: strings are in an array 0-index.

Frets numbering

Frets are numbered starting at 0 and from the head of the neck towards the bridge.

Fret number 0 is the nut, or the "zero fret" installed close the the nut on certain guitars.

Interval display

Intervals can be displayed in two forms:

  • full interval: 11
  • simplified interval: 4

"P" and "M" are omitted.

TODO

  • Display stacked intervals

  • Color schemes

    • colors for intervals

  • Type checking:

    • Flow or TypeScript. Go with Flow if possible.

  • Make sure react-router is not build into the component because it is only used by the sample-app.

  • Allow overriding of the display options per Shape. For example, on the same diagram, one shape could be displayed with notes and another shape could be displayed with intervals.

  • Font:

    • Nunito
    • PT Sans Narrow
    • Quicksand
    • Dosis
    • Varela Round

Never forget:

Optimize Later - Premature optimization is the root of all evil. The most important function of computer code is to communicate the programmer's intent to a human reader. Any coding practice that makes your code harder to understand in the name of performance is a premature optimization.

Apply the Robustness principle - Be liberal in what you accept, and conservative in what you send