Well hey there 👋

In this blog post I’m going to discuss how to add user reactions to your Gatsby blog posts using a fun, open-source React UI component called react-svg-bubble-slider.

Demo

If you’re a keen bean and would like to see a fully finished demo blog I’ve created an example of how react-svg-bubble-slider could be used to add reactions to a Gatsby blog, using Fauna for the backend and Netlify Functions and apollo-server-lambda to handle the data requests.

• Demo Blog: https://netlify-reactions.netlify.app/
• Source Code: https://github.com/PaulieScanlon/netlify-reactions

Why Reactions?

You’re probably familiar with reactions from social media platforms such as Twitter, Instagram, et al., but I rarely see reactions in blog posts. A common approach in blogs is to implement comments, but there are additional complications involved when allowing users to write whatever they want and post it to your backend.

When you expose an input, you’re giving the reader the opportunity to write anything — it’s only a matter of time before someone writes something rude. You probably don’t want your blog posts peppered with expletives, so you need to set up a moderation queue to review comments and approve or delete them.

Adding reactions removes this extra overhead because you’re only allowing readers to choose from a pre-approved set of reactions. It’s still interactive, but no moderation is required!

When I started to think about reactions I was struggling to think of a fun and original way to present the options to the reader. I toyed around with the “heart”, “thumbs up” / “thumbs down” approach for a while but wasn’t really excited by it, until I saw this tweet from Chris Gannon.

As soon as I saw Chris’s SVG Bubble Slider, I knew it would make a perfect way to expose a pre-defined set of reactions to allow readers to leave their reactions on a blog post.

I explained the idea to Chris and he was on board. However this can only be used on free projects. If you want to use it for a commercial project, you’ll need to talk to Chris about a license.

This post will broadly explain the steps required to add react-svg-bubble-slider to a Gatsby blog, but you could similarly add this to any React application.

#blog #gatsby