useCopy

React hook to copy text and show a "copied" message for a short time.

Implementation

import { useRef, useState } from "react";
import copy from "copy-to-clipboard";

export const useCopy = (): [boolean, (text: string) => void] => {
  const [showCopied, setShowCopied] = useState(false);
  const timeoutRef = useRef<any>(null);

  const copyText = (text: string) => {
    copy(text);
    setShowCopied(true);

    if (timeoutRef.current != null) {
      clearTimeout(timeoutRef.current);
    }

    timeoutRef.current = setTimeout(() => {
      setShowCopied(false);
      timeoutRef.current = null;
    }, 1500);
  };

  return [showCopied, copyText];
};

Usage

const MyComponent = () => {
  const [copied, copy] = useCopy();
  
  return (
    <button onClick={() => copy("some text")}>
        {copied ? "copied!" : "copy text"}
    </button>
  )
}
Last Updated May 13, 2021