react-guitar-lyrics

This component shows a guitar chord above the lyrics in the form of text or svg diagram. This project is a sub project of [Guitar-Editor](https://github.com/Haixiang6123/Guitar-Editor).

Usage no npm install needed!

<script type="module">
  import reactGuitarLyrics from 'https://cdn.skypack.dev/react-guitar-lyrics';
</script>

README

react-guitar-lyrics

This component shows a guitar chord above the lyrics in the form of text or svg diagram. This project is a sub project of Guitar-Editor.

Screenshots

LyricsEmbed

or

LyricsNotEmbed

How to run

$ npm install

$ npm start

How to use

[Chord Name] Lyrics...

<Lyrics isEmbedChord={true}>
    [F] Good morning!
</Lyrics>

All Chords

Chords 1

Chords 2

Chords 3

Advanced

Chord component

If you are interested in the Chord component, 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.