feat: 🎸 add onCopy and onError events and use NPM copy library

package.json

@@ -34,6 +34,7 @@
   },
   "homepage": "https://github.com/streamich/react-use#readme",
   "dependencies": {
+    "copy-to-clipboard": "^3.1.0",
     "nano-css": "^5.1.0",
     "react-wait": "^0.3.0",
     "screenfull": "^4.1.0",

src/__stories__/useCopyToClipboard.story.tsx

@@ -5,7 +5,10 @@ import {useCopyToClipboard} from '..';
 
 const Demo = () => {
   const [text, setText] = React.useState('');
-  const [copied, copyToClipboard] = useCopyToClipboard(text);
+  const [copied, copyToClipboard] = useCopyToClipboard(text, {
+    onCopy: txt => alert('success: ' + txt),
+    onError: err => alert(err),
+  });
 
   return (
     <div>

src/useCopyToClipboard.ts

@@ -1,23 +1,19 @@
+import {useState, useCallback, useRef} from 'react';
 import useUpdateEffect from './useUpdateEffect';
 import useRefMounted from './useRefMounted';
-import {useState, useCallback, useRef} from 'react';
+const writeTextDefault = require('copy-to-clipboard');
 
 export type WriteText = (text: string) => Promise<void>; // https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText
-export type UseCopyToClipboard = (text?: string, writeText?: WriteText) => [boolean, () => void];
-
-const writeTextDefault = async (text) => {
-  const element = document.createElement('textarea');
-  element.value = text;
-  document.body.appendChild(element);
-  try {
-    element.select();
-    document.execCommand('copy');
-  } finally {
-    document.body.removeChild(element);
-  }
-};
+export interface UseCopyToClipboardOptions {
+  writeText?: WriteText;
+  onCopy?: (text: string) => void;
+  onError?: (error: any, text: string) => void;
+}
+export type UseCopyToClipboard = (text?: string, options?: UseCopyToClipboardOptions) => [boolean, () => void];
+
+const useCopyToClipboard: UseCopyToClipboard = (text = '', options) => {
+  const {writeText = writeTextDefault, onCopy, onError} = (options || {}) as UseCopyToClipboardOptions;
 
-const useCopyToClipboard: UseCopyToClipboard = (text = '', writeText = writeTextDefault) => {
   if (process.env.NODE_ENV !== 'production') {
     if (typeof text !== 'string') {
       console.warn('useCopyToClipboard hook expects first argument to be string.');
@@ -39,10 +35,12 @@ const useCopyToClipboard: UseCopyToClipboard = (text = '', writeText = writeText
       await writeText(text);
       if (!mounted.current) return;
       setCopied(true);
+      onCopy && onCopy(text);
     } catch (error) {
       if (!mounted.current) return;
       console.error(error);
       setCopied(false);
+      onError && onError(error, text);
     }
   }, [text]);
 

yarn.lock

@@ -3932,6 +3932,13 @@ copy-to-clipboard@^3.0.8:
   dependencies:
     toggle-selection "^1.0.3"
 
+copy-to-clipboard@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.1.0.tgz#0a28141899e6bd217b9dc13fd1689b3b38820b44"
+  integrity sha512-+RNyDq266tv5aGhfRsL6lxgj8Y6sCvTrVJnFUVvuxuqkcSMaLISt1wd4JkdQSphbcLTIQ9kEpTULNnoCXAFdng==
+  dependencies:
+    toggle-selection "^1.0.6"
+
 core-js-compat@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.0.0.tgz#cd9810b8000742535a4a43773866185e310bd4f7"
@@ -11010,7 +11017,7 @@ to-regex@^3.0.1, to-regex@^3.0.2:
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
-toggle-selection@^1.0.3:
+toggle-selection@^1.0.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=