Replace react-use-clipboard with copy-to-clipboard

We didn't need the complexity of the (admittedly very small) React hook, and the package hasn't declared compatibility with React 19, so let's just switch to copying things manually via copy-to-clipboard.

package.json

@@ -83,6 +83,7 @@
     "@vitest/coverage-v8": "^3.0.0",
     "babel-plugin-transform-vite-meta-env": "^1.0.3",
     "classnames": "^2.3.1",
+    "copy-to-clipboard": "^3.3.3",
     "eslint": "^8.14.0",
     "eslint-config-google": "^0.14.0",
     "eslint-config-prettier": "^10.0.0",
@@ -117,7 +118,6 @@
     "react-dom": "19",
     "react-i18next": "^15.0.0",
     "react-router-dom": "^7.0.0",
-    "react-use-clipboard": "^1.0.7",
     "react-use-measure": "^2.1.1",
     "rxjs": "^7.8.1",
     "sass": "^1.42.1",

src/room/InviteModal.tsx

@@ -19,7 +19,7 @@ import {
   LinkIcon,
   CheckIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
-import useClipboard from "react-use-clipboard";
+import copy from "copy-to-clipboard";
 
 import { Modal } from "../Modal";
 import { getAbsoluteRoomUrl } from "../utils/matrix";
@@ -42,18 +42,17 @@ export const InviteModal: FC<Props> = ({ room, open, onDismiss }) => {
     () => getAbsoluteRoomUrl(room.roomId, e2eeSystem, room.name),
     [e2eeSystem, room.name, room.roomId],
   );
-  const [, setCopied] = useClipboard(url);
   const [toastOpen, setToastOpen] = useState(false);
   const onToastDismiss = useCallback(() => setToastOpen(false), [setToastOpen]);
 
   const onButtonClick = useCallback(
     (e: MouseEvent) => {
       e.stopPropagation();
-      setCopied();
+      copy(url);
       onDismiss();
       setToastOpen(true);
     },
-    [setCopied, onDismiss],
+    [url, onDismiss],
   );
 
   return (

yarn.lock

@@ -6883,7 +6883,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"copy-to-clipboard@npm:^3.3.1":
+"copy-to-clipboard@npm:^3.3.3":
   version: 3.3.3
   resolution: "copy-to-clipboard@npm:3.3.3"
   dependencies:
@@ -7502,6 +7502,7 @@ __metadata:
     "@vitest/coverage-v8": "npm:^3.0.0"
     babel-plugin-transform-vite-meta-env: "npm:^1.0.3"
     classnames: "npm:^2.3.1"
+    copy-to-clipboard: "npm:^3.3.3"
     eslint: "npm:^8.14.0"
     eslint-config-google: "npm:^0.14.0"
     eslint-config-prettier: "npm:^10.0.0"
@@ -7536,7 +7537,6 @@ __metadata:
     react-dom: "npm:19"
     react-i18next: "npm:^15.0.0"
     react-router-dom: "npm:^7.0.0"
-    react-use-clipboard: "npm:^1.0.7"
     react-use-measure: "npm:^2.1.1"
     rxjs: "npm:^7.8.1"
     sass: "npm:^1.42.1"
@@ -11744,18 +11744,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-use-clipboard@npm:^1.0.7":
-  version: 1.0.9
-  resolution: "react-use-clipboard@npm:1.0.9"
-  dependencies:
-    copy-to-clipboard: "npm:^3.3.1"
-  peerDependencies:
-    react: ^16.8.0 || ^17 || ^18
-    react-dom: ^16.8.0 || ^17 || ^18
-  checksum: 10c0/f75ba85b885ae45d0c99a09a0652a2f64c1d9d6d015293bf01b2e6a9f50ff2a6b1830f6e60c1f639b9ae33fa434bb31adbf43f613df2402438204ea7456cf86a
-  languageName: node
-  linkType: hard
-
 "react-use-measure@npm:^2.1.1":
   version: 2.1.7
   resolution: "react-use-measure@npm:2.1.7"