CSS module for ClickToCopy

client/src/components/util/ClickToCopy.jsx

@@ -1,66 +0,0 @@
-import React, { useState, useRef } from "react";
-import styled from "styled-components";
-
-const Container = styled.div`
-  position: relative;
-  display: inline-flex;
-  justify-content: center;
-`
-
-const UnderlinedSpan = styled.span`
-  border-bottom: 1px dashed #bbb;
-`
-
-const ToolTip = styled.span`
-  background-color: black;
-  color: white;
-  text-align: center;
-  padding: 2px 8px;
-  border-radius: 8px;
-  position: absolute;
-  z-index: 1;
-  top: -115%;
-  white-space: nowrap;
-  transition: opacity 0.25s;
-  opacity: ${({ show }) => show ? 0.75 : 0};
-`
-
-const InvisbleTextarea = styled.textarea`
-  position: absolute;
-  top: -10000px;
-  z-index: -10000;
-  opacity: 0;
-`
-
-export default ({ text, children }) => {
-  const textareaRef = useRef(null);
-  const [hovered, setHovered] = useState(false);
-  const [copied, setCopied] = useState(false);
-
-  const onClick = () => {
-    textareaRef.current.select();
-    document.execCommand("copy");
-    setCopied(true);
-  }
-
-  const onHover = () => {
-    setCopied(false);
-    setHovered(true);
-  }
-
-  const onUnhover = () => {
-    setHovered(false);
-  }
-
-  return (
-    <Container>
-      <UnderlinedSpan onClick={onClick} onMouseOver={onHover} onMouseOut={onUnhover}>
-        {children ? children : text}
-      </UnderlinedSpan>
-      <ToolTip show={hovered}>
-        {copied ? "Copied!" : "Click to Copy"}
-      </ToolTip>
-      <InvisbleTextarea ref={textareaRef} value={text} readOnly />
-    </Container>
-  )
-}

client/src/components/util/ClickToCopy/ClickToCopy.jsx

@@ -0,0 +1,22 @@
+import React, { useRef, useState } from 'react';
+import styles from './ClickToCopy.module.css';
+
+export default ({ text, children }) => {
+  const textareaRef = useRef(null);
+  const [ copied, setCopied ] = useState(false);
+  const onClick = () => {
+    textareaRef.current.select();
+    document.execCommand('copy');
+    setCopied(true);
+  };
+
+  return (
+    <div className={styles.container}>
+      <span className={styles.underlined} onClick={onClick} onMouseOver={() => setCopied(false)}>
+        {children ?? text}
+      </span>
+      <span className={styles.tooltip}>{copied ? 'Copied!' : 'Click to Copy'}</span>
+      <textarea className={styles.invisible} ref={textareaRef} value={text ?? children} readOnly />
+    </div>
+  );
+};

client/src/components/util/ClickToCopy/ClickToCopy.module.css

@@ -0,0 +1,34 @@
+.container {
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+}
+
+.underlined {
+  border-bottom: 1px dashed #bbb;
+}
+
+.tooltip {
+  background-color: black;
+  color: white;
+  text-align: center;
+  padding: 2px 8px;
+  border-radius: 8px;
+  position: absolute;
+  z-index: 1;
+  top: -115%;
+  white-space: nowrap;
+  transition: opacity 0.25s;
+  opacity: 0;
+}
+
+.container > .underlined:hover + .tooltip {
+  opacity: 0.75;
+}
+
+.invisible {
+  position: absolute;
+  top: -10000px;
+  z-index: -10000;
+  opacity: 0;
+}

client/src/components/util/ClickToCopy/index.js

@@ -0,0 +1 @@
+export { default } from './ClickToCopy';