SvgBubbleSlider

SvgBubbleSlider is fun way to add reactions to your blog posts 😃 😠 😥 and comes equipped with 14 built in reactions, but you don't have to use them all, see the icons prop to modify the icons list.

You can access the current reaction via a render prop and use it to post to your back-end of choice.

Click, drag or use your keyboard arrows to explore all the reactions.

demo 👇

react-svg-bubble-slider.netlify.app

Getting Started 🚀

You can install SvgBubbleSlider as a node module via npm or yarn

npm install react-svg-bubble-slider

Usage 🧰

To use SvgBubbleSlider import it and add it to your React component's render method

// some-component.js/.tsx
import React from 'react';

import { SvgBubbleSlider } from 'react-svg-bubble-slider';

const SomeComponent = () => {
  return (
    <div>
      ...
      <SvgBubbleSlider>
        {({ reaction }) => reaction && <button>{reaction}</button>}
      </SvgBubbleSlider>
    </div>
  );
};

export default SomeComponent;

If you're using react-svg-bubble-slider in your project i'd love to hear from you @pauliescanlon

Thanks 🙏

Thanks have to go to Chris Gannon for creating the original SVG Bubble Slider

Licence ⚖️

GSAP and all GreenSock files are subject to the standard GreenSock license which can be found at https://greensock.com/standard-license