Generator for generating chords of guitar or ukulele in the form of svg.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public
screenshots
src
.gitignore
LICENSE
README.md
package-lock.json
package.json
yarn.lock

README.md

react-chord-generator

Generator for generating chords of guitar or ukulele in the form of svg. This project is a sub project of Guitar-Editor.

I got the inspiration from website 有谱么 (A Chinese guitar tabs website). However, the ways we define a chord are totally different. It takes me 2 days to transfer all their chords data into mine. I have to say their way to define a chord is easier.

Screenshot

Screenshot

Directory

├── README.md
├── package.json
├── src
│   ├── App.js   ## Entry point
│   ├── components
│   │   └── Chord
│   │       ├── Chord.jsx  
│   │       ├── CustomChord
│   │       │   ├── CustomChord.jsx  ## CustomChord component
│   │       │   ├── styles.css
│   │       │   └── utils.js  ## Files to calculate position of svg
│   │       └── chords.js     ## Normal chord component
│   ├── dataSource
│   │   └── chords.js         ## All chords data
│   ├── index.js
│   └── registerServiceWorker.js
└── yarn.lock

How to run

$ npm install

$ npm start

How to use

chordName can be 'Am', 'C', 'Fm' ...

<Chord chordName="F"/>

All Chords

Chords 1

Chords 2

Chords 3

Advanced

How to define a chord

There is a component called CustomChord nested in Chord component. For this component, everything should be well defined by yourself.

chord should be an object like this:

let chord = {
    "name": "F",
    "crosses": [],
    "points": [{"x": 1, "y": 2.5, "text": "3"}, {"x": 2, "y": 2.5, "text": "4"}, {"x": 3, "y": 1.5, "text": "2"}],
    "lines": [{"text": 1, "start": {"x": 0, "y": 0.5}, "end": {"x": 5, "y": 0.5}}],
    "min": {"text": "", "x": -1, "y": -1},
    "max": {"text": "", "x": -1, "y": -1}
}

Then put it into the component.

<CustomChord chord={chord} />

The rules are as followed:

Instructions

Guitar Lyrics

Want to see how to use this to compo with text? Please check this out.

Guitar tabs editor

If you like this project, maybe you love my Guitar-Editor. You can edit a guitar tab with the online editor.