Narcissistic Piano Mover

    react-chord-generator

    0.1.0 • Public • Published

    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.

    Keywords

    none

    Install

    npm i react-chord-generator

    DownloadsWeekly Downloads

    0

    Version

    0.1.0

    License

    none

    Unpacked Size

    2.61 MB

    Total Files

    24

    Last publish

    Collaborators

    • seamonster