• Stars
    star
    157
  • Rank 232,921 (Top 5 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 7 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

React library for easily generate guitar/ukulele SVG chords

react-chords

React library for easily generate string instruments SVG chord diagrams

Installation

With NPM

npm install @tombatossals/react-chords

With Yarn

yarn add @tombatossals/react-chords

Usage

import React from 'react'
import ReactDOM from 'react-dom'

import Chord from '@tombatossals/react-chords/lib/Chord'

const MyChord = () => {
    const chord = {
        frets: [1, 3, 3, 2, 1, 1],
        fingers: [1, 3, 4, 2, 1, 1],
        barres: [1],
        capo: false,
    }
    const instrument = {
        strings: 6,
        fretsOnChord: 4,
        name: 'Guitar',
        keys: [],
        tunings: {
            standard: ['E', 'A', 'D', 'G', 'B', 'E']
        }
    }
    const lite = false // defaults to false if omitted
    return (
        <Chord
            chord={chord}
            instrument={instrument}
            lite={lite}
        />
    )
}

ReactDOM.render(
  <MyChord />,
  document.getElementById('root')
);

Example of use

Using the chords-db database we can get this result: react-chords

More Repositories

1

angular-leaflet-directive

AngularJS directive to embed an interact with maps managed by Leaflet library
JavaScript
1,508
star
2

chords-db

String Instruments Chords Database.
JavaScript
358
star
3

angular-openlayers-directive

AngularJS directive to embed an interact with maps managed by the OpenLayers library
JavaScript
284
star
4

luci-app-vpnc

Luci administration GUI for VPNC (Cisco VPN Concentrator Client)
Lua
13
star
5

angularjs-tutorial

Tutorial sencillo de uso de AngularJS
JavaScript
12
star
6

voz

Asterisk bash script to download, compile, install, and configure a guifi.net ready-to-use asterisk server
Shell
5
star
7

git-puesto-en-practica

Presentaci贸n HTML de iniciaci贸n a Git
JavaScript
4
star
8

troncales

Routers real-time bandwith meter graph
JavaScript
3
star
9

godot-examples

Godot 3 examples repository
GDScript
3
star
10

powermeter

Power consumption measurement and management
JavaScript
3
star
11

openwrt-vpnc

Instalaci贸n y configuraci贸n de un router con OpenWRT y VPNC
CSS
3
star
12

tombatossals-blog

My blog
JavaScript
2
star
13

openwrt-repetidor-wireless

Configurar un router con OpenWRT en modo repetidor Wireless
2
star
14

gps

Wireless Link Monitoring Application
JavaScript
2
star
15

love2d-examples

Love2D easy to understand examples
Lua
2
star
16

squid_guifi_splash

Splash screen for a Squid proxy (guifi.net edition)
JavaScript
2
star
17

node-openid-auth-sample

Example application which adds an authentication framework template for a node.js application
JavaScript
2
star
18

try_git

1
star
19

extjs4-intro

Presentaci贸n simple de introducci贸n a ExtJS4
JavaScript
1
star
20

gestiondeltiempo

Presentaci贸n de Google Calendar orientada a la gesti贸n eficiente del tiempo en el trabajo
HTML
1
star
21

coverama

React + Horizon Dashboard
JavaScript
1
star
22

iparty-guifi

Presentaci贸n de guifi.net para la iParty 2012
JavaScript
1
star
23

geography

Geography learning game
JavaScript
1
star
24

react-redux-horizon-starter

React, Redux, Horizon, Oauth authentication, Webpack and ES6 starter kit :)
JavaScript
1
star
25

movies

Backbone.js movies presenter
JavaScript
1
star
26

unimajors

Presentaciones del curso de la Universidad para Mayores de la UJI
JavaScript
1
star
27

efergy-elite-decode

Go program for decoding a RTL-SDR frame read from an Efergy Elite 1.0
C
1
star
28

micronautas

Micronautas.com site
JavaScript
1
star
29

rinspect

Inspection utility of the OSPF routing table of a router connected to the guifi.net network
JavaScript
1
star