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: "😱",
  },
];