React Counter Customizer

Eons ago, I briefly looked into ReactJS, to see what all the hype was about. At the time, I didn’t see much value in it since it didn’t look applicable to the projects that I was working on. Recently, I decided to give it another go. I took a deeper dive this time, and tried making a React-based customizer for my radial Counter JavaScript library.

Live Demo | Source Code

At the start, everything seemed fairly straightforward. Of course, it didn’t stay that way. Thanks Murphy! After scaffolding the user form and app components, I went about implementing my Counter library. As it turns out, my library and React are completely incompatible!

The short of it is, I had to completely rewrite my Counter library as a Counter component. The preparation and delegation of frames is handled by the root App component itself. The Counter component simply draws each frame as instructed by the App.

Along the way I discovered some rounding errors (doh!) and some design flaws. The way that the Counter component was written meant that it didn’t have context for the data it was being given. The state had been lifted up to the App component, so there was no way for the Counter to tell which data points should take precedence. Should the start and end dates dictate how the Counter is drawn, or should the initial and final angles determine that? The Counter had no way of knowing. I wanted to maintain that level of abstraction, as I believe it to be the agreed best practice when using React. So, I solved this by defining two separate modes for the Counter. That is, the “automatic” and “manual” modes. The automatic mode allows the Counter to determine it’s starting/ending angles and inner text using the dates provided by the form. The manual mode allows the user to dictate what the previously mentioned properties are, ignoring the dates provided.