Nomadic People Migration

    react-chord-parser

    0.3.0 • Public • Published

    react-chord-parser

    React component and utility for parsing and rendering guitar/ukulele chords.
    Version <0.2.0 is deprecated.


    Install

    npm install react-chord-parser --save

    Usage

    Note, that chords in input string must starts with capital letter, e.g. Am7.

    import {Parser, Chord, Chordify} from "react-chord-parser";
     
    const input = 'G                D                   \
                 When I find myself in times of trouble,\
                   Em       C                           \
                 Mother Mary comes to me,               \
                   G              D       C          G  \
                 Speaking words of wisdom, let it be.';
     
    const parser = new Parser(input);
     
    // Return an array of unique chords found in the string
    const uniques = parser.unique(); // => ["C", "D", "Em", "G"];
     
    // If you want to exclude word from parsing 
    // just precede it with "\" character, e.g. "What \A Day"
     
    class MyComponent extends React.Component {
     
        diagramSupplier = (chord) => {
            switch (chord) {
                case "C":
                    return "x32010";
                case "D":
                    return "xx0232";
                case "Em":
                    return "022000";
                case "G":
                    return "320033";
                default:
                    return "xxxxxx";
            }
        };
        
        // this will render all unique chords from the input as vector image
        renderUniqueChords() {
            return uniques.map(chord => <Chord 
                                            key={chord} 
                                            name={chord} 
                                            diagram={this.diagramSupplier(chord)}/>);
        }
        
        render() {
            return (
                // Just emphasize chords found in the input with some color.
                // You can be sure that input text properly sanitized,
                // actually no html tags are allowed, if any – they will be deleted.
                // You can get more control using parser.wrap(callback) method
                <Chordify color="#aa4444" input={input}/>
            )
        }
    }
     

    Tests

    Run npm test.

    License

    MIT.

    Install

    npm i react-chord-parser

    DownloadsWeekly Downloads

    11

    Version

    0.3.0

    License

    MIT

    Last publish

    Collaborators

    • kyryloz