react封装复制和获取粘贴板hooks

直接上代码

function useClipboard() {
    const ref = useRef(null);

    const copyToClipboard = useCallback(function (text?: string | number | null) {
      return new Promise<string | number>(function (res, rej) {
        try {
          let copyText = text;

          if (!copyText) {
            copyText = (ref.current as unknown as HTMLInputElement)?.value;
          }

          if (!copyText) {
            const error = 'The copied content cannot be empty';
            rej(error);
            return;
          }

          if (typeof copyText !== 'string' && typeof copyText !== 'number') {
            const error = 'The copied content must be a string or a number';
            rej(error);
            return;
          }

          navigator.clipboard
            .writeText(copyText.toString())
            .then(function () {
              res(copyText as string | number);
            })
            .catch(function (err) {
              rej(err);
            });
        } catch (error) {
          rej(error);
        }
      });
    }, []);

    const getClipboard = useCallback(function () {
      return navigator.clipboard.readText();
    }, []);

    return [ref, { copyToClipboard, getClipboard }] as const;
  }

使用

无输入框的example

  const [, { copyToClipboard }] = useClipboard();

  async function copy() {
    await copyToClipboard('copy');
  }

  return <button onClick={copy}>copy</button>;

有输入框的example

  const [ref, { copyToClipboard }] = useClipboard();

  return (
    <>
      <input ref={ref} />
      <button onClick={() => copyToClipboard()}>copy</button>
    </>
  );