
Show HN: React Guitar – A guitar component for React - 4lejandrito
https://react-guitar.com
======
tfeldmann
Looks nice! I‘m currently working on something similar based on vue:

[https://fretty.app](https://fretty.app)

It‘s a work in progress but you can already play around with scales and
different tunings

~~~
4lejandrito
I really like fretty!

In fact react-guitar is the end result of a very similar project that I never
finished.

I needed to reuse the guitar component for another project I am working on now
so I decided to make it open source.

~~~
uhoh-itsmaciek
These are both great! I also have a similar project:
[https://fretboard.cool](https://fretboard.cool)

~~~
delvinj
Seems like fretboard apps are a favorite pastime.

Here's mine
[http://firemeinterns.com/fretter/](http://firemeinterns.com/fretter/)

~~~
tzs
Mine is downright primitive compared to all of the ones the rest of you are
posting, being a command line program in C that I originally wrote around
1986, probably for THINK C on my Mac Plus.

Here is the source code [1], only updated to compile cleanly with a modern C
compiler and not to depend on any libraries or functions that were specific to
THINK C, plus one bug fix and some reformatting.

Here are some usage examples:

    
    
      $ ./chord
      c
      C:  C E G
      <3>|-----|-----|-<5>-|-----|-----|-----|-----|-<1>-|-----|-----|-----|-<3>-|
         |-<1>-|-----|-----|-----|-<3>-|-----|-----|-<5>-|-----|-----|-----|-----|
      <5>|-----|-----|-----|-----|-<1>-|-----|-----|-----|-<3>-|-----|-----|-<5>-|
         |-----|-<3>-|-----|-----|-<5>-|-----|-----|-----|-----|-<1>-|-----|-----|
         |-----|-----|-<1>-|-----|-----|-----|-<3>-|-----|-----|-<5>-|-----|-----|
      <3>|-----|-----|-<5>-|-----|-----|-----|-----|-<1>-|-----|-----|-----|-<3>-|
      c7
      C7:  C E G A#
      <3>|-----|-----|-<5>-|-----|-----|-<7>-|-----|-<1>-|-----|-----|-----|-<3>-|
         |-<1>-|-----|-----|-----|-<3>-|-----|-----|-<5>-|-----|-----|-<7>-|-----|
      <5>|-----|-----|-<7>-|-----|-<1>-|-----|-----|-----|-<3>-|-----|-----|-<5>-|
         |-----|-<3>-|-----|-----|-<5>-|-----|-----|-<7>-|-----|-<1>-|-----|-----|
         |-<7>-|-----|-<1>-|-----|-----|-----|-<3>-|-----|-----|-<5>-|-----|-----|
      <3>|-----|-----|-<5>-|-----|-----|-<7>-|-----|-<1>-|-----|-----|-----|-<3>-|
      c#m
      C#m:  C# E G#
      <3>|-----|-----|-----|-<5>-|-----|-----|-----|-----|-<1>-|-----|-----|-<3>-|
         |-----|-<1>-|-----|-----|-<3>-|-----|-----|-----|-<5>-|-----|-----|-----|
         |-<5>-|-----|-----|-----|-----|-<1>-|-----|-----|-<3>-|-----|-----|-----|
         |-----|-<3>-|-----|-----|-----|-<5>-|-----|-----|-----|-----|-<1>-|-----|
         |-----|-----|-----|-<1>-|-----|-----|-<3>-|-----|-----|-----|-<5>-|-----|
      <3>|-----|-----|-----|-<5>-|-----|-----|-----|-----|-<1>-|-----|-----|-<3>-|
    

You simply type chord names, and it shows you what notes are in the chord and
where you can find them on the guitar fretboard. The first example is a C
chord. It tells you the notes you want are C E G. In the diagram a <1> means
that is a place you can play the root of the chord, a <3> is the third, a <5>
is the fifth. For the C chord, then, we see that on open first string would
give us <3>, the third fret <5>, the root is on the 8th fret, and the <3> is
also on the 12th fret.

Chord names are the root note (with # for sharp or b for flat), and modifiers
'm' for minor, '6', '7', or '9' for a 6th, 7th, or 9th chord. (I have no idea
why I did not include diminished chords).

If a line starts with '-' it is a command to change settings. Commands are
"-cN" to set a capo on the Nth fret

Here are the commands. "-cN" for a capo on the Nth fret. "-t<notes>" to set
the tuning for each string, where <notes> is a list of 6 note names (which can
each be followed by # or b). "-Td" or "-TD" for D tuning. "-sN" to transpose
by N half-steps (N can be negative). "-n" to switch to a narrower display and
"-w" to switch back to normal. Narrow display looks like this:

    
    
      C:  C E G
       3 |---|---|-5-|---|---|---|---|-1-|---|---|---|-3-|---|---|-5-|---|
         |-1-|---|---|---|-3-|---|---|-5-|---|---|---|---|-1-|---|---|---|
       5 |---|---|---|---|-1-|---|---|---|-3-|---|---|-5-|---|---|---|---|
         |---|-3-|---|---|-5-|---|---|---|---|-1-|---|---|---|-3-|---|---|
         |---|---|-1-|---|---|---|-3-|---|---|-5-|---|---|---|---|-1-|---|
       3 |---|---|-5-|---|---|---|---|-1-|---|---|---|-3-|---|---|-5-|---|
    

It's always amusing to look at one's old code. Much of it seems like it was
written by someone else. For instance, I see a lot more spaces around
punctuation than I would use today. I think that is probably because the
editor I used back then did not have syntax highlighting, so extra space was
needed to make sure you didn't confuse consecutive tokens.

[1] [https://pastebin.com/0rZnaVgu](https://pastebin.com/0rZnaVgu)

~~~
4lejandrito
Thanks for sharing this, I really like how simple it is.

You should properly release it and possibly publish it in the main package
managers.

------
porkloin
Very nice! I have been working on a triad and inversion practice tool in React
and may seriously consider rewriting it to use your component.
[https://porkloin.github.io/triad-practice-
mk2/](https://porkloin.github.io/triad-practice-mk2/)

Any chance that the fingering indicators can take text or color? I use that a
lot in my current tool. Not to rush you with feature requests or anything :p

~~~
4lejandrito
So glad you liked it :)

You can customise the content of the indicators with the "renderFinger" prop
and render whatever you want inside.

See [https://github.com/4lejandrito/react-
guitar/blob/master/pack...](https://github.com/4lejandrito/react-
guitar/blob/master/packages/site/components/Demo.tsx#L56)

Feel free to create an issue if that's not enough for you. I'll be more than
happy to help.

------
gpspake
The best interactive guitar UI I've ever found is all-guitar-chords.com and I
use several of its features regularly. It might not be built with the hotness
but the reverse scale and reverse chord features are really nice and the main
use case I can think of for using something like this. I'd like to see this as
an open source library and I've started on attempts several times but never
finished. I think what would be cool is a "core" functional library written in
typescript with all the basic well-unit-tested functions that could be used
across different js libraries. Then, for react, a library like react-table
that just exposes the functions via hooks (headless/agnostic to ui). then the
user could implement the UI as they please using the hooks.

Edit: _Obviously_ this project looks really cool and I love react so I'll be
playing around with it for sure. Props to the author.

~~~
totemandtoken
I can't endorse all-guitar-chords.com enough. Arguably, it does need a modern
facelift even though I'm fine with the old adobe flash look. But an all-
guitar-chords-esque library to port to the UI of your choice is a pretty good
idea.

------
yingw787
Very cool! Too bad we only have one cursor...it'd be cool to have friends join
in as extra "fingers" and play melodies in a QWOP-like fashion :P

~~~
lvturner
The Amiga used to let you plug in two mice - this is how Lemmings two player
works!

------
markvdb
Pro classical guitar teacher here.

Thank you for your great work! I see some wonderful potential educational uses
for this. If you'd like further feedback, please don't hesitate to get in
touch!

~~~
adrianh
Have you used Soundslice
([https://www.soundslice.com/](https://www.soundslice.com/)) with your
students? I help make it and would love to get your feedback.

~~~
roldie
Wow, this is fantastic. Great work!

------
4lejandrito
If there is anyone with experience on theming React components I would be
really happy to have some ideas/help on how to add support for guitar
themes/skins:

[https://github.com/4lejandrito/react-
guitar/issues/5](https://github.com/4lejandrito/react-guitar/issues/5)

------
kvst
as a left-handed guitarist, I really appreciate the left-handed option.

------
jfengel
Very clever. Took me a second to figure out how to mute a string. I figured it
out, and I can't think of a better way, but otherwise it was quite easy to
figure out.

~~~
4lejandrito
I couldn't figure out a better way either.

Thanks for your comment :)

------
rickducott
Great work! Makes me want to pick up my guitar :)

------
anilakar
DADGAD? Oh well, time to play some Led Zeppelin!

------
daiyanze
This is awesome! Btw, I personally think that it'd be better to have
orchestration feature for a complete music.

------
tehwebguy
This is incredible. My only suggestion, make a hotkey (optionally toggle /
push to touch) for the hover to play

------
iddan
Awesome! Works great on my iPhone SE

------
pxi
Very nice! Humble suggestion: Add some Neil Young and Joni Mitchel tunings.

~~~
4lejandrito
Thanks for the suggestion. I've been doing my research (sorry I have limited
guitar knowledge, I am learning Spanish flamenco now).

According to
[https://en.wikipedia.org/wiki/List_of_guitar_tunings](https://en.wikipedia.org/wiki/List_of_guitar_tunings)

You might be referring to:

Neil Young -> "B-F-B-E-G-B" or "D-A-D-G-B-D"

Joni Mitchel -> "D-A-D-F-A-D" or "G-G-D-G-B-D"

Which ones are the correct ones?

~~~
sova
All valid, different root chords for different songs.

------
PascLeRasc
This is so cool! Super responsive and fun.

------
imvetri
Had fun playing it. Thanks for sharing

~~~
imvetri
Recorded some changes here
[https://vimeo.com/440905819](https://vimeo.com/440905819)

------
tieguy2k
this is awesome

------
the_cat_kittles
lovely- the demo could have a little wider view of the fretboard, maybe 6 or 8
frets at a time.

