refactor!: onClickReaction now passes ReactionObj

README.md

@@ -68,7 +68,7 @@ const App = () => {
 | `hideCloseButton`                 | `boolean`                   | -             | Hides the close button.                                      |
 | `hideHeader`                      | `boolean`                   | -             | Hides the header                                             |
 | `isVisible`                       | `boolean`                   | `false`       | Determines popup visibility.                                 |
-| `onClickReaction`                 | `(value?: Element) => void` | -             | Function called when an emoji is clicked.                    |
+| `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`](#placementtype) | `"bottom-start"` | Positions the popup relative to the `trigger`.      |
 | `reactionsArray`                  | [`ReactionObj[]`](#reactionobj) | -         | Array of emojis.                                             |

example/package.json

@@ -1,6 +1,6 @@
 {
   "name": "example",
-  "version": "1.4.2",
+  "version": "1.5.0",
   "homepage": "https://dylandbl.github.io/react-quick-reactions",
   "private": true,
   "dependencies": {

example/src/components/header/Header.tsx

@@ -7,16 +7,18 @@ import {
 import { GitHubLogoSvg } from "../svgs/LogoSvgs";
 import { NpmLogoSvg } from "../svgs/LogoSvgs";
 import QuickReactions from "react-quick-reactions";
+import { ReactionObj } from "react-quick-reactions/lib/esm/types/index";
 import { useState } from "react";
 import { emojiArr2 } from "../../utils/sampleData";
 
 export const Header = () => {
   const [showHeaderQuickReactions, setShowHeaderQuickReactions] =
     useState(false);
-  const [selectedEmoji, setSelectedEmoji] = useState("" as string | null);
+  const [selectedEmoji, setSelectedEmoji] =
+    useState<ReactionObj["content"]>("");
 
-  const handleReactionSelect = (emoji?: Element) => {
-    if (emoji) setSelectedEmoji(emoji?.textContent);
+  const handleReactionSelect = (emoji?: ReactionObj) => {
+    if (emoji) setSelectedEmoji(emoji?.content);
     setShowHeaderQuickReactions(false);
   };
 

example/src/components/showcaseComponents/config/Config.tsx

@@ -126,7 +126,7 @@ export const Config = () => {
           <br />
         </InputsContainer>
         <QuickReactions
-          onClickReaction={() => {}}
+          onClickReaction={(item) => console.log(item)}
           isVisible={showPopup}
           onClose={() => setShowPopup(false)}
           animation={animation}

example/src/components/showcaseComponents/gridShowcase/GridShowcase.tsx

@@ -1,8 +1,11 @@
 import { useCallback, useState } from "react";
 import QuickReactions from "react-quick-reactions";
-import { PlacementType } from "../../../../../lib/esm/types";
 import { gridEmojis } from "../../../utils/sampleData";
 import { Grid, GridItem, EmojiDisplay } from "./GridShowcaseStyles";
+import {
+  ReactionObj,
+  PlacementType,
+} from "react-quick-reactions/lib/esm/types/index";
 
 export const gridItems: { title: PlacementType | null; show: boolean }[] = [
   {
@@ -109,9 +112,7 @@ export const gridItems: { title: PlacementType | null; show: boolean }[] = [
 
 export const GridShowcase = () => {
   const [gridItemsArray, setGridItemsArray] = useState(gridItems);
-  const [currentEmoji, setCurrentEmoji] = useState<string | null | undefined>(
-    ""
-  );
+  const [currentEmoji, setCurrentEmoji] = useState<ReactionObj["content"]>("");
 
   const handleVisibility = useCallback(
     (title: string | null, show: boolean) => {
@@ -150,7 +151,7 @@ export const GridShowcase = () => {
             <QuickReactions
               key={item?.title + index.toString()}
               onClickReaction={(element) => {
-                setCurrentEmoji(element.textContent);
+                setCurrentEmoji(element.content);
                 handleVisibility(item.title, false);
               }}
               isVisible={item.show}

example/src/components/showcaseComponents/photoShoot/Comment.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import QuickReactions from "react-quick-reactions";
+import { ReactionObj } from "react-quick-reactions/lib/esm/types/index";
 import { commentEmojis } from "../../../utils/sampleData";
 import { SmileSvg } from "../../svgs/SmileSvg";
 import {
@@ -35,12 +36,12 @@ export const CustomComment = ({
   const [visible, setVisible] = useState(false);
   const [reactionArrayState, setReactionArrayState] = useState(reactionArray);
 
-  const handleClickReaction = (emojiElement?: Element) => {
+  const handleClickReaction = (emojiElement?: ReactionObj) => {
     setVisible(false);
     const reactionArrayStateCopy = reactionArrayState;
 
     const index = reactionArrayStateCopy.findIndex(
-      (item) => item.content === emojiElement?.textContent
+      (item) => item.content === emojiElement?.content
     );
 
     reactionArrayStateCopy[index].count += 1;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-quick-reactions",
-  "version": "1.1.6",
+  "version": "2.0.0",
   "description": "A popup emoji-reaction component for React.",
   "private": false,
   "main": "./lib/cjs/index.js",

src/components/ReactionPopover/ReactionPopover.tsx

@@ -113,7 +113,7 @@ export const ReactionPopover = (props: PopoverProps) => {
                 }
                 key={item?.name + "-" + index}
                 id={item?.id}
-                onClick={(e) => onClickReaction(e.target as Element)}
+                onClick={() => onClickReaction(item)}
                 onMouseEnter={
                   changeHeaderOnReactionElemHover
                     ? () => setPopoverHeader(item?.name)

src/types/index.ts

@@ -1,4 +1,4 @@
-type ReactionObj = {
+export type ReactionObj = {
   id?: string;
   name: string;
   content: string | JSX.Element;
@@ -31,7 +31,7 @@ export interface RQRProps {
   hideCloseButton?: boolean;
   hideHeader?: boolean;
   isVisible: boolean;
-  onClickReaction: (event: Element) => void;
+  onClickReaction: (reaction: ReactionObj) => void;
   onClose: () => void;
   outerDivClassName?: string;
   placement?: PlacementType;