复制到剪贴板功能的React Hooks实现

迷途小码农零零发

已于 2024-08-14 13:48:44 修改

阅读量81

点赞数 3

分类专栏： React 文章标签： react.js javascript 前端

于 2024-01-17 11:17:25 首次发布

本文链接：https://blog.csdn.net/yiguoxiaohai/article/details/135645390

版权

React 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

import React from 'react';

function oldSchoolCopy(text: string) {
  const tempTextArea = document.createElement('textarea');
  tempTextArea.value = text;
  document.body.appendChild(tempTextArea);
  tempTextArea.select();
  document.execCommand('copy');
  document.body.removeChild(tempTextArea);
}

export default function useCopyToClipboard(): [string | null, (text: string) => Promise<void>] {
  const [state, setState] = React.useState<string | null>(null);

  const copyToClipboard = React.useCallback(async (value: string) => {
    try {
      if (navigator?.clipboard?.writeText) {
        await navigator.clipboard.writeText(value);
        setState(value);
      } else {
        throw new Error('writeText not supported');
      }
    } catch (e) {
      oldSchoolCopy(value);
      setState(value);
    }
  }, []);

  return [state, copyToClipboard];
}