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

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>
  )
}