1.4.2 • Published 1 year ago
react-chord-svg v1.4.2
React Chord SVG
React component to generate chord diagram SVGs
Install
yarn add react-chord-svg
npm install react-chord-svg --save
Usage
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",
},
]}
/>;
Options
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;
}
1.4.2
1 year ago
1.4.1
1 year ago
1.4.0
1 year ago
1.3.2
1 year ago
1.3.1
1 year ago
1.3.0
1 year ago
1.2.6
1 year ago
1.2.5
2 years ago
1.2.4
2 years ago
1.2.3
2 years ago
1.2.2
2 years ago
1.2.1
2 years ago
1.2.0
2 years ago
1.1.4
2 years ago
1.1.3
2 years ago
1.1.2
2 years ago
1.1.1
2 years ago
1.1.0
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago
0.4.0
2 years ago
0.3.12
2 years ago
0.3.11
2 years ago
0.3.10
2 years ago
0.3.9
2 years ago
0.3.8
2 years ago
0.3.7
2 years ago
0.3.6
2 years ago
0.3.5
2 years ago
0.3.3
2 years ago
0.3.2
2 years ago
0.3.1
2 years ago
0.3.0
2 years ago
0.2.5
2 years ago
0.2.2
2 years ago
0.2.1
2 years ago
0.2.0
2 years ago
0.1.3
2 years ago