Merge branch 'master' into feat/htmlpanel

Author: frederikcreemers

CHANGELOG.md

@@ -1,3 +1,7 @@
+## v0.1.8-beta.0
+
+- Add `show` prop to `Popup`, that allows you to specify whether the popup should be shown or hidden.
+
 ## v0.1.7-beta.0
 
 - Add `<HtmlPanel>` component

lib/ui/Popup.tsx

@@ -9,11 +9,13 @@ import { useMethod, useConversation, useUIBox, useMountBox } from "../hooks";
 import { EventListeners } from "../EventListeners";
 import { UIBoxProps } from "../types";
 import { BoxContext } from "../MountedBox";
+import { useEffect } from "react";
 
 type PopupProps = UIBoxProps<Talk.Popup> &
   Talk.PopupOptions & {
     highlightedWords?: Parameters<Talk.Popup["setHighlightedWords"]>[0];
     popupRef?: React.MutableRefObject<Talk.Popup | undefined>;
+    show?: boolean;
     children?: React.ReactNode;
   };
 
@@ -39,6 +41,7 @@ function ActivePopup(props: PopupProps & { session: Talk.Session }) {
     conversationId,
     syncConversation,
     asGuest,
+    show,
     popupRef,
     children,
     ...optionsAndEvents
@@ -53,7 +56,20 @@ function ActivePopup(props: PopupProps & { session: Talk.Session }) {
   useMethod(box, presence, "setPresence");
   useMethod(box, highlightedWords, "setHighlightedWords");
   useConversation(session, box, syncConversation, conversationId, asGuest);
-  useMountBox(box, undefined);
+  const mounted = useMountBox(box, {show: show ?? true});
+
+  useEffect(() => {
+    if(show === undefined || !mounted) {
+      return;
+    }
+
+    if(show) {
+      box?.show();
+    } else {
+      box?.hide();
+    }
+
+  }, [show, mounted, box])
 
   return (
     <BoxContext.Provider value={box}>

package.json

@@ -28,7 +28,7 @@
     "url": "https://github.com/talkjs/talkjs-react/issues"
   },
   "homepage": "https://talkjs.com",
-  "version": "0.1.7-beta.0",
+  "version": "0.1.8-beta.0",
   "type": "module",
   "files": [
     "dist"