Adding interactivity to react-circle-of-fifths

Morning all, this is a new post in my series covering the development of an SVG Circle of Fifths component for React. That component has just recently reached the point where I feel comfortable telling people to try it out and is MIT licensed - if you think you could use a nice looking Circle of Fifths in some musical application you're working on, check it out.

More than happy to accept feedback, PRs or issues on the repo, I've got a lot more stuff planned but the basic usability is there, I think!

https://github.com/epiccoleman/react-circle-of-fifths

Gb has F#° as the diminished.

I'll also note you stick to natural/# for diminished. For minor, you transition between #/b boundary at D#m/Bbm but for major you transition at the B/Gb boundary. Personally I'd go with F# and be consistent between major and minor.