React avatar ES6 rewrite

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?

Goodbye Grunt

I see a lot of small projects using build systems like Grunt or Gulp while they just need some basic functionality that you can write without these, often bulky, build systems.

You can for example do a lot with the build in NPM script property. There are some default script handles that it supports, but you can also add your own.

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.

ES6

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.

Upgrade

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.