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
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' ...
All Chords
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": 25 "text": "3" "x": 2 "y": 25 "text": "4" "x": 3 "y": 15 "text": "2" "lines": "text": 1 "start": "x": 0 "y": 05 "end": "x": 5 "y": 05 "min": "text": "" "x": -1 "y": -1 "max": "text": "" "x": -1 "y": -1
Then put it into the component.
The rules are as followed:
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.