After some hectic weeks, preparing for the birth of our son, I’ve finally found some time to finish up the rewrite of my react avatar component. The code base was becoming a complete mess.
What has changed?
I really like this approach because it’s simple you don’t need all the extra dependencies. I’m not saying that you need to stop using Grunt at all, we use Grunt a lot at BuboBox and Ambassify, but sometimes the commands are so simple that it’s much easier to use NPM scripts.
The project is completely rewritten from the ground up. I’ve extracted all the handling of the different sources into separate source classes which makes it much easier to understand and extend.
Color flicker on rerender
If you used the previous version of react avatar and used the built in random color function you probably noticed the color flicker problem. Each rerender would render the avatar in a new color regardless the value being the same or not. The implementation is now rewritten so that a certain value will get the same color assigned, every time.
I’ve done this by doing a sum of all ASCII values, and using this value to pick a color from fixed array of colors.
If you are already using React avatar you can just upgrade without any changes. I’ve bumped the major version number to reflect the rewrite, but no breaking changes were introduced.