Reaction-animation NPM

Reaction Animation

Introducing a React component library that makes it super easy to add fun social media-style reaction animations to your projects. 🎉 Think of the cool emoji effects you see on Instagram Live – now you can easily implement them without any hassle using this library. 🚀

Demo

Demo GIF

Installation

Install via NPM:

  npm install reaction-animation

Or via YARN:

  yarn add reaction-animation

Usage/Examples

import React from "react";
import { AnimationContainer, useReactionAnimation } from "reaction-animation";

const ReactionObj = () => {
  return (
    <img
      src="https://cdn4.iconfinder.com/data/icons/reaction/32/shy-512.png"
      alt="alt"
      height={"40px"}
      width={"40px"}
    />
  );
};

const App = () => {
  const { reactionDetails, addReaction } = useReactionAnimation();

  return (
    <div className="App">
      <AnimationContainer
        reactionDetails={reactionDetails}
        style={{ height: "300px", width: "50%", border: "1px solid black" }}
      />

      <button
        onClick={() => {
          addReaction({ ReactionObj, animationDuration: 5 });
        }}
      >
        Click me
      </button>
    </div>
  );
};

export default App;