React-quick-reactions NPM

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