react-quick-reactions

✨ Try it out: dylandbl.github.io/react-quick-reactions ✨

A lightweight, customizable popup component for quick reactions and emojis, à la GitHub's reaction popup or Facebook's "likes".

Installation

npm install react-quick-reactions

Or with yarn:

yarn add react-quick-reactions

Example use

import { useState } from "react";
import QuickReactions from "react-quick-reactions";

const App = () => {
  const [isVisible, setIsVisible] = useState(false);
  
  return (
    <div className="App">
      <QuickReactions
        reactionsArray={[
          {
            name: "Laughing",
            content: "😂",
          }
        ]}
        isVisible={isVisible}
        onClose={() => setIsVisible(false)}
        onClickReaction={(reaction) => {
          window.alert(reaction.content);
        }}
        trigger={
          <button
            onClick={() => {
              setIsVisible(!isVisible);
            }}
          >
            Show
          </button>
        }
      />
    </div>
  );
}

API

Prop name	Type	Default value	Description
animation	AnimationType	"fade"	The animation effect used when the popup is displayed.
changeHeaderOnReactionElemHover	boolean	true	When true, the popup's header updates on emoji mouseover to display the emoji's name.
closeButton	string | JSX.Element	-	String or element to replace the default close button.
disableClickAwayToClose	boolean	-	Disables closing by clicking away from the popup.
header	string	"Quick reactions"	Alternative default title for popup's header.
hideCloseButton	boolean	-	Hides the close button.
hideHeader	boolean	-	Hides the header
isVisible	boolean	false	Determines popup visibility.
onClickReaction	(value: ReactionObj) => void	-	Function called when an emoji is clicked. Passes the emoji's ReactionObj.
onClose	() => void	-	Function called on popup close.
placement	PlacementType	"bottom-start"	Positions the popup relative to the trigger.
reactionsArray	ReactionObj[]	-	Array of emojis.
wide	boolean	-	Makes the popup wide instead of tall. Up to eight emojis wide, by default.
closeButtonClassName	string	-	Optional classes for the close button span.
outerDivClassName	string	-	Optional classes for the popup container div.
reactionElementClassName	string	-	Optional classes for the emoji spans.
selectionContainerClassName	string	-	Optional classes for the div containing the array of emojis.

AnimationType

type AnimationType = "drop" | "fade" | "flip" | "zoom" | "none";

PlacementType

type PlacementType =
  | "top-start"
  | "top"
  | "top-end"
  | "left-start"
  | "left"
  | "left-end"
  | "right-start"
  | "right"
  | "right-end"
  | "bottom-start"
  | "bottom"
  | "bottom-end";

ReactionObj

type ReactionObj = {
  id?: string;  // Used as element's #id.
  name: string; // Displayed in popup header.
  content: string | JSX.Element;
};

Example

const emojiArr1 = [
  {
    id: "laughing",
    name: "Laughing",
    content: "😂",
  },
  {
    id: "crying",
    name: "Crying",
    content: "😢",
  },
  {
    id: "thinking",
    name: "Thinking",
    content: "🤔",
  },
  {
    id: "screaming",
    name: "Screaming",
    content: "😱",
  },
];