terrassumptions/client/src/components/click-to-copy.component.jsx

import React, { useRef, useState } from "react";

export default ({ text }) => {
  const textareaRef = useRef(null);
  const [hovered, setHovered] = useState(false);
  const [copied, setCopied] = useState(false);
  const copyText = () => {
    textareaRef.current.select();
    document.execCommand("copy");
    setCopied(true);
  };

  return (
    <div
      style={{
        position: "relative",
        display: "flex",
        justifyContent: "center",
      }}
    >
      <span
        style={{ borderBottom: "1px dotted black" }} 
        onClick={copyText}
        onMouseOver={() => setHovered(true)}
        onMouseOut={() => {setHovered(false); setCopied(false)}}
      >
        {text}
      </span>
      <span
        style={{
          display: hovered ? "block" : "none",
          backgroundColor: "black",
          color: "#fff",
          textAlign: "center",
          padding: "1px 5px",
          borderRadius: "8px",
          position: "absolute",
          zIndex: 1,
          top: "-100%",
          whiteSpace: "nowrap",
        }}
      >
        {copied ? "Copied!" : "Click to Copy"}
      </span>
      <textarea
        ref={textareaRef}
        style={{ position: "absolute", top: "-1000px" }}
        value={text}
        readOnly
      />
    </div>
  )
}