From 4f1450aaf0ad671bb668e8fda5dac2f63743c2a5 Mon Sep 17 00:00:00 2001 From: Robin Date: Mon, 9 Jun 2025 11:53:58 -0400 Subject: [PATCH] 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 | 2 +- src/room/InviteModal.tsx | 7 +++---- yarn.lock | 16 ++-------------- 3 files changed, 6 insertions(+), 19 deletions(-) diff --git a/package.json b/package.json index 4afde12b..b88779de 100644 --- a/package.json +++ b/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", diff --git a/src/room/InviteModal.tsx b/src/room/InviteModal.tsx index 8ee68cb8..759dce30 100644 --- a/src/room/InviteModal.tsx +++ b/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 = ({ 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 ( diff --git a/yarn.lock b/yarn.lock index 8a16160d..5baefcc1 100644 --- a/yarn.lock +++ b/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"