React-Guitar ·

A beautiful and accessible guitar component for React.

See https://react-guitar.com for a live demo.

Projects using React-Guitar

• Workland (GIF) - A metaverse for tech teams.

Usage

npm i react-guitar

import React from 'react'
import { render } from 'react-dom'
import Guitar from 'react-guitar'

render(
  <Guitar strings={[0, 1, 2, 2, 0, -1]} />,
  document.getElementById('root')
)

Check out the storybook for more advanced examples.

Props

Hooks

useSound

In order to enable sound playing react-guitar offers the useSound hook:

npm i react-guitar react-guitar-sound react-guitar-tunings

import React, { useMemo } from 'react'
import { render } from 'react-dom'
import Guitar from 'react-guitar'
import { standard } from 'react-guitar-tunings'
import useSound from 'react-guitar-sound'

function SampleGuitarWithSound() {
  const strings = useMemo(() => [0, 1, 2, 2, 0, -1], [])
  const { play, strum } = useSound({ fretting: strings, tuning: standard })

  return <Guitar strings={strings} onPlay={play} />
}

render(<SampleGuitarWithSound />, document.getElementById('root'))

It receives an object with the following properties:

And will return an object containing:

There are 2 ways to create a custom instrument:

1. Using withSoundFont:

   import React, { useMemo } from 'react'
   import { render } from 'react-dom'
   import Guitar from 'react-guitar'
   import { standard } from 'react-guitar-tunings'
   import useSound, { withSoundFont } from 'react-guitar-sound'
   
   const electricGuitar = withSoundFont('electric_guitar_clean')
   
   function SampleGuitarWithSound() {
     const strings = useMemo(() => [0, 1, 2, 2, 0, -1], [])
     const { play, strum } = useSound({
       instrument: electricGuitar,
       fretting: strings,
       tuning: standard,
     })
   
     return <Guitar strings={strings} onPlay={play} />
   }
   
   render(<SampleGuitarWithSound />, document.getElementById('root'))
   

   It uses danigb/soundfont-player under the hood so all these instrument names are available.

2. Using withSamples:

   import React, { useMemo } from 'react'
   import { render } from 'react-dom'
   import Guitar from 'react-guitar'
   import { standard } from 'react-guitar-tunings'
   import useSound, { withSamples } from 'react-guitar-sound'
   
   const flamencoGuitar = withSamples({
     E2: 'https://react-guitar.com/samples/E2.mp3',
     D3: 'https://react-guitar.com/samples/D3.mp3',
     G3: 'https://react-guitar.com/samples/G3.mp3',
     E4: 'https://react-guitar.com/samples/E4.mp3',
   })
   
   function SampleGuitarWithSound() {
     const strings = useMemo(() => [0, 1, 2, 2, 0, -1], [])
     const { play, strum } = useSound({
       instrument: flamencoGuitar,
       fretting: strings,
       tuning: standard,
     })
   
     return <Guitar strings={strings} onPlay={play} />
   }
   
   render(<SampleGuitarWithSound />, document.getElementById('root'))
   

Theming

react-guitar look and feel can be customised by passing the theme prop. A theme is an object describing the customisable properties of the guitar:

{
  description: string // for screen readers
  color: string
  nut: { color: string }
  fret: {
    color: string
    separator: {
      color: string
      radius?: boolean
      shadow?: boolean
      width?: 'sm' | 'md'
    }
    marker?: (fret: number) => JSX.Element | null
    counter: { color: string }
  }
  string: { color: (string: number) => string }
  finger: { text: { color: string }; color: string }
}

See https://react-guitar.com/storybook/?path=/story/guitar--theming for an interactive example.

By default the guitar is styled as a Spanish guitar but some other themes are available:

• react-guitar-theme-dark: A dark theme.
• react-guitar-theme-coco: A theme for the guitar from the Coco film.

Upgrading from 0.x

If you were using useSound like this:

useSound(
  {
    E2: '...E2.mp3',
    D3: '...D3.mp3',
    G3: '...G3.mp3',
    E4: '...E4.mp3',
  },
  strings,
  tuning
)

You need to change it to:

import useSound, { withSamples } from 'react-guitar-sound'

// outside the render function
const instrument = withSamples({
  E2: 'https://react-guitar.com/samples/E2.mp3',
  D3: 'https://react-guitar.com/samples/D3.mp3',
  G3: 'https://react-guitar.com/samples/G3.mp3',
  E4: 'https://react-guitar.com/samples/E4.mp3',
})

// inside the render function
useSound({
  instrument,
  fretting: strings,
  tuning,
})

Developing

• yarn build will build the component and the site, this is mandatory the first time you clone the repo.
• yarn start will spin up the storybook and the site and all the packages in watch mode.