react-abc2svg-drums

A React component that uses react-abc2svg to display drums music notation written using the ABC notation with some extra symbols.

Usage

This component creates a new voicemap that adds new drum related symbols to the standard ABC notation:

| Drum Technique | Abc Notation | |:--------------:|:------------:| | Ghost Note | !(.!!).!note | | Hi-Hat | ^g | | Crash | ^c' | | Stacker | ^d' | | Ride | ^A' | | Ride Bell | ^B' | | Cow Bell | ^D' | | Cross Stick | ^c | | Foot Splash | ^d |

Basic Mode

You can specify the scale, title, time signature, note length and drums notation, and the component will generate a single voice with that info.

<Abc2SvgDrums
  scale={1.5}
  title="My Title"
  timeSignature="4/4"
  noteLength="1/16"
  basicAbcDrumsNotation="[^g2F2]^g2 [^g2c2F2]^g2 [^g2F2]^g2 [^g2c2F2]^g2"
  showDrumsErrors
/>

Advanced Mode

You have to define the whole abc notation (you can use all the extensions provided by abc2svg). For more advanced or complex notation, in this mode you can define different voices, staves, etc.

<Abc2SvgDrums
  fullAbcDrumsNotation={`%%pagescale 1.5
X:1
T:My Title
M:4/4
L:1/16
K:C clef=perc
V:Drums stem=up
[^g2F2]^g2 [^g2c2F2]^g2 [^g2F2]^g2 [^g2c2F2]^g2
`
  }
  showDrumsErrors
/>

IMPORTANT: Remember that if you set the fullAbcDrumsNotation prop, the rest of the props will be ignored and the component will render only what's in this prop.

Additional Props

| Parameter | Description | Type | Values | Default | |:---:|---|:---:|:---:|:---:| | showDrumsErrors | Display an error message in case the provided abc notation has some error | boolean | true/false | false |

References

• All the drum headers and symbols have been obtained from the amazing app Groove Scribe created by Mr. Lou Montulli.

• To convert abc notation to svg, react-abc2svg uses the awesome abc2svg.