@magicdidac/chord-display

A React library to easily generate guitar SVG chords display.

Install

With npm

npm i @magicdidac/chord-display

With yarn

yarn add @magicdidac/chord-display

Examples

Here are some examples of what the chords would look like.

How to use it

import { ChordDisplay, getChordByName } from '@magicdidac/chord-display'

const MyChord = () => {

  return (
    <ChordDisplay
      chord={getChordByName('C')}
      {/* chord={Chords.C} */}
    />
  )
}

To use the preset chords in the package you can obtain them in two different ways:

1. using the getChordByName function, where you will pass the name of the chord you want.
2. Using the Chords object, where the preset chords in the package are located.

Alternatively, you can generate your own chord by generating an object that follows the structure of the following example:

{
  name: 'A',
  frets: [-1, 0, 2, 2, 2, 0]
}

• -1 means that this string is not played
• 0 means that the string is played in the air
• the rest of the numbers are the fret

If you need to make a capo the chord would look like this:

{
  name: 'F',
  barre: 1,
  frets: [0, 2, 2, 1, 0, 0]
}

• the number in the barre property is the fret where the capo is desired
• 0 means to play the string in the air (where the capo is located)

Note: it is recommended to use the Chord interface included in the package if you use typescript