Newfangled Package Modernizer
Unleash awesomeness. Private packages, team management tools, and powerful integrations. Get started with npm Orgs »

react-fretboard-diagram

0.1.1 • Public • Published

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.


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

Keywords

none

install

npm i react-fretboard-diagram

Downloadsweekly downloads

0

version

0.1.1

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability