refactor!: standardized naming (#23)

* chore: minor version bump

package.json

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

src/components/ReactionPopover/ReactionPopover.tsx

@@ -13,7 +13,7 @@ import { CloseSvg } from "../svg/CloseSvg";
 export const ReactionPopover = (props: PopoverProps) => {
   const {
     isVisible = false,
-    onClickEmoji,
+    onClickReaction,
     closeButton,
     header = "Quick reactions",
     outerDivClassName,
@@ -66,7 +66,7 @@ export const ReactionPopover = (props: PopoverProps) => {
               className={"rqr-reaction-element " + reactionElementClassName}
               key={item?.name + "-" + index}
               id={item?.id}
-              onClick={(e) => onClickEmoji(e.target as Element)}
+              onClick={(e) => onClickReaction(e.target as Element)}
               onMouseEnter={
                 changeHeaderOnReactionElemHover
                   ? () => setPopoverHeader(item?.name)

src/index.tsx

@@ -1,20 +1,20 @@
 import { ReactNode } from "react";
 import { ReactionPopover } from "./components/ReactionPopover/ReactionPopover";
-import { RQRSpan } from "./styles/RqrStyles";
+import { QuickReactionsSpan } from "./styles/RqrStyles";
 import { PopoverProps } from "./types";
 
-interface RQRProps extends PopoverProps {
+interface QuickReactionsProps extends PopoverProps {
   trigger: ReactNode;
 }
-const RQR = (props: RQRProps) => {
-  const { trigger } = props;
+const QuickReactions = (props: QuickReactionsProps) => {
+  const { trigger, isVisible } = props;
 
   return (
-    <RQRSpan>
+    <QuickReactionsSpan>
       {trigger}
-      <ReactionPopover {...props} />
-    </RQRSpan>
+      {isVisible && <ReactionPopover {...props} />}
+    </QuickReactionsSpan>
   );
 };
 
-export default RQR;
+export default QuickReactions;

src/styles/RqrStyles.ts

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 
-export const RQRSpan = styled.span`
+export const QuickReactionsSpan = styled.span`
   display: inline-block;
   position: relative;
 `;

src/types/index.ts

@@ -14,7 +14,7 @@ export interface PopoverProps {
   hideCloseButton?: boolean;
   hideHeader?: boolean;
   isVisible: boolean;
-  onClickEmoji: (event?: Element) => void;
+  onClickReaction: (event?: Element) => void;
   onClose: () => void;
   outerDivClassName?: string;
   reactionElementClassName?: string;