React avatar ES6 rewrite

Posted on by Wim Mostmans
avatars gallery

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.


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.

Tip jar

Tip Jar

If you like this blog, leave a tip! Your tip will help provide the basic necessities which sustain this blog: coffee, beer and raincoats for surviving the pitiful Belgium climate.

Buy me a coffee
Wim Mostmans

About Wim Mostmans

Freelance full stack developer and Co-founder of the Employee Advocacy platform Ambassify, with a general interest for web technologies and electronics.

Leave a comment