How do I use the React Guitar component in a React app?

React Guitar is a guitar component for React that renders a 6-string, 22-fret instrument with built-in keyboard accessibility. You can use it to display a playable guitar, set a tuning, apply a visual theme, and let users interact with strings and frets. The component ships with themes such as spanish, dark, and coco, and it supports left-handed mode, hover playback, and chord display.

What you need before starting

• A React project (any modern React setup works).
• A way to install packages, such as npm or yarn.
• Basic familiarity with JSX and component props.

The source material describes React Guitar as “a beautiful and accessible guitar component for React,” so the main task is installing it, rendering it, and configuring its props.

Install and import

Install the package in your project:

npm install react-guitar

Then import the component into the file where you want to render it:

import { Guitar } from 'react-guitar';

If your project uses a different package manager, use the equivalent install command. The exact package name and export style should match what your installed version provides; the component is referred to as Guitar in the source description.

Render a basic guitar

The simplest usage is to render the component with no props:

function App() {
  return <Guitar />;
}

This produces a guitar with 6 strings and 22 frets, starting from fret 0. The default tuning shown in the source is E A D G B E, and the default fretting is 0, 0, 0, 0, 0, 0 — all open strings.

Configure tuning, theme, and orientation

React Guitar accepts props that control how the instrument looks and behaves. Based on the source material, these include:

A configured example:

<Guitar
  tuning={['E', 'A', 'D', 'G', 'B', 'E']}
  theme="spanish"
  leftHanded={false}
  playOnHover={true}
  frets={22}
  strings={6}
/>

The spanish theme is described as “a typical Spanish guitar with a brown fretboard and golden details.” The dark and coco themes are also available as alternatives.

Handle user interaction

React Guitar is designed to be played. According to the source, the component supports:

• Focusing a string — once a string is focused, you can navigate strings and frets using the arrow keys.
• Playing a string — when a specific string is focused, press p to play it.
• Play on hover — if enabled, hovering over a string plays it.
• Chord display — the component can show a chord name such as Em7add11.
• Strum — a strum action is available in the interface.
• Copy Link — the interface includes a way to copy a link, likely to share the current guitar state.

If you need to react to playback in your own code, attach an event handler prop to the Guitar component. The source does not list the exact prop name for playback events, so check the component’s API or documentation for the handler signature. A typical pattern would be:

<Guitar
  onPlay={(string, fret) => {
    console.log(`Played string ${string} at fret ${fret}`);
  }}
/>

Replace onPlay with the actual event prop your version exposes.

Keyboard accessibility

The component is built with accessibility in mind. The documented keyboard interactions are:

1. Tab or focus into the guitar to focus a string.
2. Arrow keys move between strings and frets.
3. p plays the currently focused string.

This means users who cannot use a mouse can still navigate and play the instrument. If you enable playOnHover, mouse users get immediate audio feedback, while keyboard users retain the arrow-key and p controls.

Common issues to check

• No sound — the source shows a “Sound Loading...” state, so audio assets may need to load before playback works. Wait for loading to finish.
• Wrong notes — verify your tuning array matches the intended string order. The default is E A D G B E from lowest to highest string.
• Left-handed layout looks wrong — set leftHanded to true and confirm the theme still renders correctly.
• Fret numbering confusion — the source lists fret -1 as “Mute” and fret 0 as the open string. Keep this in mind when mapping frets to notes.
• Theme not applying — use one of the supported theme names (spanish, dark, coco) exactly as written.

When to use React Guitar

Use React Guitar when you need an interactive, accessible guitar UI inside a React app — for example, a chord-learning tool, a music education site, or a demo that lets users explore tunings and frets. It is a good fit if you want keyboard navigation and theme options out of the box. If you only need a static image of a guitar, a plain SVG or image may be simpler. If you need advanced audio synthesis or MIDI input, you may need to combine React Guitar with a separate audio library.