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;
}