npm

Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript.Learn more »

ukulele-chord

0.3.1 • Public • Published

ukulele-chord

A React component that renders ukulele chord diagrams.

It expects you to have the chord name and its numerical representation. See below.

Installation

Run the following command:

npm install -s ukulele-chord

Usage

import React from 'react';
import ReactDOM from 'react-dom';
 
import UkuleleChord from './lib/UkuleleChord';
 
ReactDOM.render(
    <div>
        <UkuleleChord name="C" frets={[0, 0, 0, 3]}/>
        <UkuleleChord name="Db7+" frets={[6, 5, 4, 3]}/>
        <UkuleleChord name="B7" frets={[8, 6, 7, 0]}/>
    </div>,
    document.querySelector('#root')
);

Examples

There are only two required arguments:

  • name: the name of the chord per ser. C, F major, Emin(maj7) you name it.
  • frets: is the numeric representation of the chord as an array of 4 numbers. Use 0 to represent no pressed string.
<UkuleleChord name="C" frets={[0, 0, 0, 3]}/>

C major


There is no need to calculate the initial chord's fret. Just set the real fret position and let the component do the rest:

<UkuleleChord name="Db7+" frets={[6, 5, 4, 3]}/>

Db augmented seventh

<UkuleleChord name="B7" frets={[8, 6, 7, 0]}/>

B seventh

Keywords

none

install

npm i ukulele-chord

Downloadsweekly downloads

12

version

0.3.1

license

GPL-3.0-only

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability