Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

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.

About

Generator for generating chords of guitar or ukulele in the form of svg.

Topics

Resources

License

Releases

No releases published

Packages

No packages published