React SVG Bubble Slider

• React
• GSAP
• SVG

You’ve probably seen reactions before on social media, Twitter, Instagram etc all have ways for users to show their like or dislike for user posted content but you don’t normally see reactions on blog posts.

The standard for the most part is to present the user with a comments form where they can leave their name and a comment. I wrote a tutorial recently for Fauna which walks you through how to build a comments system for a Gatsby blog.

You can read that post here

One problem i faced with the comments approach was moderation. If you provide a way for users to write anything they want in a comment it’s only a matter of time before some tinker writes something rude. As part of the above tutorial i factored this in and provided a way to add moderation so you, the admin can control which comments are displayed and which ones you delete.

Aside from making the application and back-end more complicated you’ll also need to regularly login and approve or delete comments.

This seems like a hassle and so i went back to the drawing board and decided that perhaps allowing users to leave a reaction was a faster way to gain feedback from users.

I toyed around with the heart and thumbs up / thumbs down idea for a while until i stumbled upon this tweet from Chris Gannon

As soon as i saw this i thought this would be the perfect way to allow users to leave reactions on blog posts.

I contacted Chris and explained the idea and he was up for open-sourcing it. He has specified that so long as it’s not used for commercial gain users are free to use this in their blogs.

Here you can find the full demo.

The original SVG Bubble Slider isn’t built in React and also uses GSAP v2 so i had quite a bit of work to do to make this work in React and using GSAP v3 but the biggest hurdle was how to work round the GreenSock members only plugin issue.

GreenSock is for the most part open-source but they do offer extended licencees for members only plugins if you sign up to Club GreenSock

One such members only plugin is the InertiaPlugin this is responsible for the throw-able effect you get when you drag and throw the slider.

GreenSock will licence this plugin for use in commercial products but they don’t really want their members only plugins available in open-source projects.

This poses a dilemma for Node modules 🤔

The repo for this project doesn’t expose the source code for the InertiaPlugin but naturally the bundled Node module does.

I had quite a difficult time explaining this to GreenSock. My main argument is that if you visit any website that uses members only plugins you could in theory inspect the bundled JavaScript and steal the code. Which is also true for Node modules. If you did want to dig into your node_modules find the dist directory for react-svg-bubble-slider uglify the bundled JavaScript and steal the members only plugin you could. This conversation went on for some time but i think in the end GreenSock agreed with my approach.

You can read the full thread here

And so finally i’m ready to release this and have created a docs site using Storybook

If you’d like to try this out in your blog head over to the docs site, install it and lemme know how you get on: @pauliescanlon