amitahire / react-guitar

A beautiful and flexible guitar component for React. ⚛️ 🎸

React-Guitar ·

A beautiful and flexible guitar component for React.

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

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

Name	Description
className	An css class string to apply to the container element.
strings	An array where each number represents the fret the string is pressed on (0 means open string and -1 muted). [0, 1, 2, 2, 0, -1] is an A minor in a standard guitar and [3, 0, 0, 0] is a C major in an ukelele.
frets	An object with the shape { from: number amount: number } to configure the frets of the guitar ({ from: 0, amount: 22 } by default). It can start on any fret which is useful for displaying just a chord instead of the whole guitar.
lefty	A boolean to configure the guitar for left handed people like me.
renderFinger	A function (string: number, fret: number) => JSX.Element that will be used to render the content of the white bubble used for the fingers. This can be used to render the note name.
onChange	A function (strings: number[]) => void that will be called when a string is press/unpressed. If not present the guitar will be read only.
onPlay	A function (string: number) => void that will be called each time the user plays a string (hovering with the mouse). This can be used to play the sound of the string.

Hooks

useSound

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

import E2 from 'react-guitar/resources/E2.mp3'
import D3 from 'react-guitar/resources/D3.mp3'
import G3 from 'react-guitar/resources/G3.mp3'
import E4 from 'react-guitar/resources/E4.mp3'

...

const { play, strum } = useSound({ E2, D3, G3, E4 }, strings, tuning)

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

...

It receives:

Name	Description
samples	A map from note names to mp3 files representing the samples. react-guitar offers 4 samples out of the box recorded from a Spanish guitar.
strings	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. react-guitar offers 4 tunings out of the box (standard, ukelele, rondeña and dadgad).

And will return an object containing:

Name	Description
play	A function that receives a string number and plays its current sound.
strum	A function that will strum all the strings of the guitar.

Developing

• yarn start will spin up the storybook and the site.
• yarn build will build the component and the site.