Update useClipboard

package.json

@@ -18,6 +18,7 @@
     "@types/jest": "^25.1.2",
     "codesandbox": "^2.1.11",
     "coloreact": "^0.3.1",
+    "copy-to-clipboard": "^3.2.1",
     "emotion-theming": "^10.0.27",
     "lodash": "^4.17.15",
     "lodash-es": "^4.17.15",

src/components/Header.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useMemo, useCallback, useRef } from 'react'
+import React, { memo } from 'react'
 import {
   Box,
   Switch,
@@ -9,7 +9,6 @@ import {
   FormLabel,
   Divider,
   DarkMode,
-  useClipboard,
 } from '@chakra-ui/core'
 import { DiGithubBadge } from 'react-icons/di'
 import { AiFillThunderbolt } from 'react-icons/ai'
@@ -20,6 +19,7 @@ import { useSelector } from 'react-redux'
 import { getComponents } from '../core/selectors/components'
 import { getShowLayout, getShowCode } from '../core/selectors/app'
 import { createShareUrl } from '../utils/share'
+import useClipboard from '../hooks/useClipboard'
 
 const CodeSandboxButton = () => {
   const components = useSelector(getComponents)
@@ -46,14 +46,12 @@ const CodeSandboxButton = () => {
 
 const ShareButton = () => {
   const components = useSelector(getComponents)
-  const sharedUrl = useMemo(() => {
-    return createShareUrl(components)
-  }, [components])
-  const { onCopy, hasCopied } = useClipboard(sharedUrl)
+
+  const { onCopy, hasCopied } = useClipboard()
 
   const copy = () => {
     if (onCopy) {
-      onCopy()
+      onCopy(createShareUrl(components))
     }
   }
 

src/hooks/useClipboard.ts

@@ -0,0 +1,28 @@
+import { useState, useRef, useEffect } from 'react'
+import copyToClipboard from 'copy-to-clipboard'
+
+const useClipboard = () => {
+  const [hasCopied, setHasCopied] = useState(false)
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null)
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
+    }
+  })
+
+  const copy = (value: string) => {
+    copyToClipboard(value)
+    setHasCopied(true)
+    timeoutRef.current = setTimeout(() => setHasCopied(false), 1500)
+  }
+
+  return {
+    onCopy: copy,
+    hasCopied,
+  }
+}
+
+export default useClipboard

yarn.lock

@@ -3800,6 +3800,13 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
+copy-to-clipboard@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.2.1.tgz#b1a1137100e5665d5a96015cb579e30e90e07c44"
+  integrity sha512-btru1Q6RD9wbonIvEU5EfnhIRGHLo//BGXQ1hNAD2avIs/nBZlpbOeKtv3mhoUByN4DB9Cb6/vXBymj1S43KmA==
+  dependencies:
+    toggle-selection "^1.0.6"
+
 core-js-compat@^3.1.1:
   version "3.4.7"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.4.7.tgz#39f8080b1d92a524d6d90505c42b9c5c1eb90611"
@@ -12441,6 +12448,11 @@ toasted-notes@3.0.0:
     "@types/react" "^16.8.10"
     "@types/react-dom" "^16.8.3"
 
+toggle-selection@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI=
+
 toidentifier@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"