What tuning, fret, and chord features does React Guitar support?

Updated

React Guitar is a React component that renders a six-string, 22-fret guitar with standard E A D G B E tuning, per-string note labels, chord name display, and a set of visual and interaction options including left-handed mode, play-on-hover, strumming, and link copying.

Tuning and fret range

The component's default tuning is E A D G B E, and the fretboard runs from fret 0 through fret 22. Each string also has a mute position, labeled Fret -1 (Mute).

The note data exposed for each string follows standard tuning, with octave numbers included:

String Open note (fret 0) Mute Highest fret shown (22)
1 E4 Fret -1 D6
2 B3 Fret -1 A5
3 G3 Fret -1 F5
4 D3 Fret -1 C5
5 A2 Fret -1 G4
6 E2 Fret -1 (listed through fret 5: A2)

Because every fret on every string carries its own note value, the component can report the exact pitch of any fretted position rather than just a fret number. For example, string 1 fret 3 resolves to G4, and string 5 fret 3 resolves to C3.

Chord display

The component shows the current fretting as a set of six values, one per string, and derives a chord name from them. In the default state all six strings are open, shown as 0, 0, 0, 0, 0, 0.

When a fretting pattern matches a known voicing, the chord name is displayed — the page evidence shows Em7add11 as an example chord label. This means the component maps fret positions to chord names rather than requiring you to type a chord symbol.

Visual and interaction options

The available options visible in the component include:

  • Theme — a theme selector, with spanish shown as the active theme and dark and coco listed as alternatives. The spanish theme is described as "a typical Spanish guitar with a brown fretboard and golden details."
  • Left handed — a toggle for left-handed orientation.
  • Play on hover — a toggle that plays a string when the pointer hovers over it.
  • Strum — triggers a strummed sound across the strings.
  • Copy Link — copies a link representing the current state.
  • Sound — audio playback, with loading states shown while samples load.

Keyboard navigation

Keyboard control is built in and tied to string focus:

  1. Focus a string.
  2. Use the arrow keys to move between strings and frets.
  3. Press 'p' to play the currently focused string.

This gives full fretboard navigation without a mouse, which is the basis for the component's accessibility claims.

What this means for use

If you need a guitar component with a fixed standard tuning, a full 22-fret range, per-note pitch data, automatic chord naming, and keyboard access, these features are all present. The trade-off is that the documented tuning is fixed at E A D G B E — the page evidence does not describe alternate tunings, so treating it as a standard-tuning component is the safe assumption unless you verify otherwise in the source.