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: | Name | Description | | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | fretting | The same value passed as the strings prop to the <Guitar /> component with the current fretting. | | tuning | An array of midi values for each string. See react-guitar-tunings for a list of the most common ones.| | instrument | Optionally the instrument to use, an acousting nylon guitar by default.

And will return an object containing:

There are 2 ways to create a custom instrument:

1. Using withSoundFont:

```jsx 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(, document.getElementById('root')) ```

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

1. Using withSamples:

```jsx 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(, 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.