https://github.com/stuart-williams/react-chord-svg

React component to generate chord diagram SVGs
https://github.com/stuart-williams/react-chord-svg

chords diagram guitar react svg

Last synced: 7 months ago
JSON representation

React component to generate chord diagram SVGs

• Host: GitHub
• URL: https://github.com/stuart-williams/react-chord-svg
• Owner: stuart-williams
• Created: 2022-10-13T19:05:55.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2022-12-03T12:39:47.000Z (almost 3 years ago)
• Last Synced: 2025-02-19T22:35:14.455Z (8 months ago)
• Topics: chords, diagram, guitar, react, svg
• Language: TypeScript
• Homepage: https://www.chord.love
• Size: 6.51 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# React Chord SVG

React component to generate chord diagram SVGs

![Minified Size](https://img.shields.io/bundlephobia/min/react-chord-svg)

![Chord](https://raw.githubusercontent.com/stuart-williams/react-chord-svg/main/assets/chord.png)

## Install

```bash

yarn add react-chord-svg

```

```bash

npm install react-chord-svg --save

```

## Usage

```jsx

import ChordSVG from "react-chord-svg";

;

```

## Options

```typescript

interface Props extends SVGProps {

  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;

}

```