chakra-ui/dist/esm/useClipboard/index.js

Responsive and accessible React UI components built with React and Emotion

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import { useState } from "react";
/**
 *
 * @param {any} value - The content to add to clipboard
 */

var copyToClipboard = function copyToClipboard(value) {
  var el = document.createElement("textarea");
  el.value = value;
  el.setAttribute("readonly", "");
  el.style.position = "absolute";
  el.style.left = "-9999px";
  document.body.appendChild(el);
  var selected = document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false;
  el.select();
  document.execCommand("copy");
  document.body.removeChild(el);

  if (selected) {
    document.getSelection().removeAllRanges();
    document.getSelection().addRange(selected);
  }
};

var useClipboard = function useClipboard(value) {
  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      hasCopied = _useState2[0],
      setHasCopied = _useState2[1];

  var onCopy = function onCopy() {
    copyToClipboard(value);
    setHasCopied(true);
    setTimeout(function () {
      return setHasCopied(false);
    }, 1500);
  };

  return {
    value: value,
    onCopy: onCopy,
    hasCopied: hasCopied
  };
};

export default useClipboard;