React component to generate chord diagram SVGs
yarn add react-chord-svg
npm install react-chord-svg --save
import ChordSVG from "react-chord-svg";
<ChordSVG
title="C Major - G Shape"
startAtFret={5}
numberOfFrets={5}
notes={[
{
string: 1,
muted: true,
},
{
string: 2,
muted: true,
},
{
fret: 1,
string: 3,
bar: 4,
color: "gray",
opacity: 0.5,
},
{
fret: 1,
string: 3,
text: "1",
},
{
fret: 1,
string: 4,
text: "1",
color: "red",
},
{
fret: 1,
string: 5,
text: "1",
},
{
fret: 4,
string: 6,
text: "4",
color: "red",
},
]}
/>;
interface Props extends SVGProps<SVGSVGElement> {
notes: Note[];
title?: string;
startAtFret?: number;
numberOfFrets?: number;
numberOfStrings?: number;
}
interface Note {
bar?: number;
fret?: number;
text?: string;
string: number;
color?: string;
muted?: boolean;
opacity?: number;
textColor?: string;
}