Replace react-clipboard.js with navigator.clipboard.writeText

We support only modern browsers!

Author: IvanGoncharov

build/webpack.js

@@ -23,9 +23,6 @@ module.exports = (env = {}, { mode }) => ({
 
   resolve: {
     extensions: ['.ts', '.tsx', '.mjs', '.js', '.json', '.css', '.svg'],
-    alias: {
-      clipboard: 'clipboard/dist/clipboard.min.js',
-    },
   },
 
   externals: env.lib

demo/IntrospectionModal.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import classNames from 'classnames';
 
+import Grid from '@material-ui/core/Grid';
 import Modal from '@material-ui/core/Modal';
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
 import Button from '@material-ui/core/Button';
-import Clipboard from 'react-clipboard.js';
 
 import {
   buildSchema,
@@ -56,7 +56,8 @@ export class IntrospectionModal extends React.Component<IntrospectionModalProps>
     this.changeCurrent({ inputType: tabNames[activeTab] });
   };
 
-  copy() {
+  async copyIntrospectionQuery() {
+    await navigator.clipboard.writeText(getIntrospectionQuery());
     this.setState({ recentlyCopied: true });
     setTimeout(() => {
       this.setState({ recentlyCopied: false });
@@ -185,17 +186,15 @@ export class IntrospectionModal extends React.Component<IntrospectionModalProps>
           Run the introspection query against a GraphQL endpoint. Paste the
           result into the textarea below to view the model relationships.
         </div>
-        <Clipboard
-          component="a"
-          className="copy-button"
-          options={{ container: this.modalRef.current }}
-          data-clipboard-text={getIntrospectionQuery()}
-          onClick={() => this.copy()}
-        >
-          <Button color="primary" size="small">
+        <Grid container justify="center">
+          <Button
+            color="primary"
+            size="small"
+            onClick={async () => this.copyIntrospectionQuery()}
+          >
             {recentlyCopied ? 'Copied!' : 'Copy Introspection Query'}
           </Button>
-        </Clipboard>
+        </Grid>
         <textarea
           value={jsonText || ''}
           placeholder="Paste Introspection Here"

package-lock.json

@@ -43,7 +43,6 @@
     "prettier": "2.6.2",
     "raw-loader": "1.0.0",
     "react": "16.8.6",
-    "react-clipboard.js": "2.0.16",
     "react-dom": "16.8.6",
     "react-svg-loader": "2.1.0",
     "style-loader": "0.23.1",