@chakra-ui/hooks/dist/esm/use-clipboard.mjs

React hooks for Chakra components

'use client';
import { useState, useEffect, useCallback } from 'react';
import copy from 'copy-to-clipboard';

function useClipboard(value, optionsOrTimeout = {}) {
  const [hasCopied, setHasCopied] = useState(false);
  const [valueState, setValueState] = useState(value);
  useEffect(() => setValueState(value), [value]);
  const { timeout = 1500, ...copyOptions } = typeof optionsOrTimeout === "number" ? { timeout: optionsOrTimeout } : optionsOrTimeout;
  const onCopy = useCallback(
    (valueToCopy) => {
      const value2 = typeof valueToCopy === "string" ? valueToCopy : valueState;
      if ("clipboard" in navigator) {
        navigator.clipboard.writeText(value2).then(() => setHasCopied(true)).catch(() => setHasCopied(copy(value2, copyOptions)));
      } else {
        setHasCopied(copy(value2, copyOptions));
      }
    },
    [valueState, copyOptions]
  );
  useEffect(() => {
    let timeoutId = null;
    if (hasCopied) {
      timeoutId = window.setTimeout(() => {
        setHasCopied(false);
      }, timeout);
    }
    return () => {
      if (timeoutId) {
        window.clearTimeout(timeoutId);
      }
    };
  }, [timeout, hasCopied]);
  return {
    value: valueState,
    setValue: setValueState,
    onCopy,
    hasCopied
  };
}

export { useClipboard };