Learn how to build a click to copy button with tooltip notification using React

This article explains how to build a click to copy button with temporary tooltip notification using React. It covers features such as copying text, displaying a notification, fading out animation, and handling user interactions.

Building a Click to Copy Function

### Rixfeed Dev Log

Summary: React code sample of a rapidly prototyped feature rich tooltip toast.

This is a very long read. Be warned. [I've changed my mind, take me back.](https://dev.pagemark.app/9gEV0Vws0aGg44RLwNJl)

There is a document somwhere where I detailed how to build this step
by step and the motivation behind each design decision. Until I find that
document, please use the comments to navigate this article.

#### Build a click to copy function

In this article I will show you how I built a click to copy
button. It has the following features:
* Allows user to click a button to copy text content to clipboard
* On successfully copying text, displays temporary 
  tooltip notification  to indicate copy was successful
* After 2 seconds, tooltip popup gracefully fades away over a 1.5 
  fade out animation
* If the user scrolls while the popup is active, it will fade away
* If the user clicks anywhere while the popup is active, it will fade away
* Handles the nightmare of combining `useEffect`s, 
  `setTimeout`s, and `addEventListener` to achieve these effects

```typescript
import { AiFillCopy } from 'react-icons/ai';
import { Interactive } from './core/Interactive';
import { useCallback, useEffect, useState } from 'react';

/**
 * ClickToCopyIcon Component Summary:
 * 
 * This component renders a copy icon and a tooltip notification. 
 * It handles the copy action, manages state, and provides a user-friendly 
 * feedback on copy success. The tooltip notification appears when the 
 * user hovers over the component and shows a "Copied to clipboard!" message. 
 * The notification automatically fades out after a duration and can also be 
 * closed by clicking anywhere on the document. The tooltip also dissappears
 * if the user scrolls.
 */

/**
 * Renders the copy icon and tooltip notification.
 * @param {Object} props - Component props
 * @param {boolean} props.isMouseOver - Indicates if the mouse is over the component
 * @param {boolean} props.isCopiedRecently - Indicates if the content was copied recently
 * @param {boolean} props.isHidden - Indicates if the tooltip is hidden
 * @returns {JSX.Element} The rendered component
 */
const ClickToCopyInner = (props: any) => {
  const { isMouseOver, isCopiedRecently, isHidden } = props;
  const color = isMouseOver ? ' text-gray-700 ' : ' text-gray-200 ';
  return (
    <>
      {!isHidden && (
        <div className={`tooltip ${isCopiedRecently ? 'opacity-80' : 'opacity-0 fade-out-fast'}`}>
          <span className="tooltip-content">Copied to clipboard!</span>
        </div>
      )}
      <AiFillCopy className={`${color} mt-[5px] mr-[5px] pb-[2px] pl-[5px]`} size={15}/>
    </>
  );
};

// Duration values for animations
/** Duration for how long the "Copied to clipboard!" notification should show */
const baseDuration = 2000; 
/** Duration for fading out the notification */
const fadeDuration = 1500; 
const totalDuration = baseDuration + fadeDuration; // Total duration

/**
 * Component that handles the copy action and manages state.
 * @returns {JSX.Element} The rendered component
 */
export const ClickToCopyIcon = () => {
  // State to track if the copy action is recently completed
  const [isCopiedRecently, setIsCopiedRecently] = useState(false); 
  // State to hide/show the "Copied to clipboard!" notification
  const [isHidden, setIsHidden] = useState(true); 

  let resetCopyStateTid: NodeJS.Timeout;
  let hideTid: NodeJS.Timeout;

  useEffect(() => {
    if (isCopiedRecently === true) {
      // Set timers to reset the copy state and hide the notification
      /** Once this times out, the fade out the animation will begin */
      resetCopyStateTid = setTimeout(() => setIsCopiedRecently(false), baseDuration);
      /** Once this times out the tooltip will be removed from the DOM */
      hideTid = setTimeout(() => setIsHidden(true), totalDuration);

      // Allow the user to click anywhere to close the notification
      let clickToResetCopyStateTid: NodeJS.Timeout;
      /** Closes the notification when the user clicks anywhere.  */
      const handleClickToClose = () => {
        setIsCopiedRecently(false);
        clickToResetCopyStateTid = setTimeout(() => setIsHidden(true), totalDuration);
        // Remove the event listener immediately to avoid retriggering it
        // on subsequent clicks. Note: this event listener
        // is not registered until the code below executes
        document.removeEventListener('click', handleClickToClose);
      };

      // Register a the handleClickToClose event listener.
      // Delayed with a timeout so the click that
      // triggered the popover does not inadvertently 
      // close it.
      setTimeout(() => {
        // Add click event listener to close the notification 
        // and clearTimeout after total duration
        document.addEventListener('click', handleClickToClose);
        setTimeout(() => {
          // If the tooltip expires on its own,
          // then we need to remove the click event listener.
          document.removeEventListener('click', handleClickToClose);
          clearTimeout(clickToResetCopyStateTid);
        }, totalDuration);
      }, 100);

      return () => {
        // cleanup
        clearTimeout(resetCopyStateTid);
        clearTimeout(hideTid);
        clearTimeout(clickToResetCopyStateTid);
        document.removeEventListener('click', handleClickToClose);
      };
    }
  }, [isCopiedRecently]);

  /**
   * Handles the copy action, sets the state, and cancels timers.
   * @returns {void}
   */
  const onClick = useCallback(() => {
    setIsCopiedRecently(true);
    setIsHidden(false);
    clearTimeout(resetCopyStateTid);
    clearTimeout(hideTid);
  }, []);

  // Hide the tooltip if the user scrolls
  useEffect(() => {
    let tid: NodeJS.Timeout;
    let tid2: NodeJS.Timeout;

    /**
     * Handles the scroll event, resetting the copy state and hiding the notification.
     * @returns {void}
     */
    const handleEvent = () => {
      setIsCopiedRecently(false);
      tid = setTimeout(() => setIsHidden(true), totalDuration);
    };

    document.addEventListener('scroll', handleEvent);
    return () => {
      document.removeEventListener('scroll', handleEvent);
      clearTimeout(tid);
      clearTimeout(tid2);
    }
  }, []);

  return (
    <Interactive 
      onClick={onClick}
      Component={ClickToCopyInner}
      isCopiedRecently={isCopiedRecently}
      isHidden={isHidden}
    />
  );
}
```

```scss 
.tooltip {
  position: relative;
  cursor: default;
}

@keyframes fadeOut {
  0% {
    opacity: .8;
  }
  100% {
    opacity: 0;
  }
}

.tooltip::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
  overflow: visible;
  z-index: 1;
}

.tooltip-content {
  position: absolute;
  top: -37px;
  left: 50%;
  transform: translateX(-50%);
  background-color: black;
  color: white;
  padding: 8px;
  border-radius: 4px;
  overflow: visible;
  z-index: 1;
}

.fade-out-fast {
  animation-name: fadeOut;
  animation-duration: 500ms;
}

```

Example usage:

```typescript
export function StaticCodeBlock(props) {
  const { ClickToCopyIcon } = props;

  return (
    <div style={{ position: 'relative' }}>
      {ClickToCopyIcon && (
        <span 
          role="Click to copy" 
          onClick={() => navigator.clipboard.writeText(value)}
          style={{
            position: 'absolute',
            top: 0,
            right: 0,
            zIndex: 1,
          }}
        >
          <ClickToCopyIcon/>
        </span>
      )}
      <CodeMirror
        {/* ... */}
      />
    </div>
  );
}
```

Thank you for coming to my TED talk.

---

tags: react