Use React portal for SharePrompt

Paroxity · Jan 31, 2025 · 9f29ed9 · 9f29ed9
1 parent f4b830b
commit 9f29ed9
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 37 deletions.
diff --git a/src/components/sidebar/SharePrompt.jsx b/src/components/sidebar/SharePrompt.jsx
@@ -1,44 +1,47 @@
 import PropTypes from "prop-types";
-import { useRef } from "react";
+import { useRef, useState } from "react";
 import { useStore } from "../../hooks/useStore";
 import Button from "../Button";
+import { createPortal } from "react-dom";
 
-function SharePrompt({ showLink, setShowLink }) {
+function SharePrompt() {
 	const id = useStore(state => state.id);
+	const [showLink, setShowLink] = useState(false);
 	const showLinkRef = useRef(null);
 
-	return (
-		showLink && (
-			<div className="popup show">
-				<div className="popup-box">
-					Here's your sharable link:
-					<div className="input">
-						<input
-							type="text"
-							readOnly
-							value={`https://framehub.paroxity.net/share/${id}`}
-							ref={showLinkRef}
-						/>
-					</div>
-					{document.queryCommandSupported("copy") && (
-						<Button
-							centered
-							onClick={() => {
-								showLinkRef.current.select();
-								document.execCommand("copy");
-								setShowLink(false);
-							}}
-						>
-							Copy
-						</Button>
-					)}
-					<Button centered onClick={() => setShowLink(false)}>
-						Close
-					</Button>
+	return <>
+		<Button centered onClick={() => setShowLink(true)}>
+			Share
+		</Button>
+		{showLink && createPortal(<div className="popup show">
+			<div className="popup-box">
+				Here's your sharable link:
+				<div className="input">
+					<input
+						type="text"
+						readOnly
+						value={`https://framehub.paroxity.net/share/${id}`}
+						ref={showLinkRef}
+					/>
 				</div>
+				{document.queryCommandSupported("copy") && (
+					<Button
+						centered
+						onClick={() => {
+							showLinkRef.current.select();
+							document.execCommand("copy");
+							setShowLink(false);
+						}}
+					>
+						Copy
+					</Button>
+				)}
+				<Button centered onClick={() => setShowLink(false)}>
+					Close
+				</Button>
 			</div>
-		)
-	);
+		</div>, document.body)}
+	</>;
 }
 
 SharePrompt.propTypes = {

diff --git a/src/components/sidebar/Sidebar.jsx b/src/components/sidebar/Sidebar.jsx
@@ -16,7 +16,6 @@ import Social from "./Social";
 function Sidebar() {
 	const type = useStore(state => state.type);
 	const [toggled, setToggled] = useState(false);
-	const [showLink, setShowLink] = useState(false);
 
 	return (
 		<>
@@ -29,9 +28,7 @@ function Sidebar() {
 				)}
 				<DangerZone />
 				{type === AUTHENTICATED && (
-					<Button centered onClick={() => setShowLink(true)}>
-						Share
-					</Button>
+					<SharePrompt />
 				)}
 				<LogoutButton />
 				<ExitButton />
@@ -45,7 +42,6 @@ function Sidebar() {
 				}}
 				alt="menu"
 			/>
-			<SharePrompt showLink={showLink} setShowLink={setShowLink} />
 		</>
 	);
 }