基于 React 封装操作浏览器剪切板的 Hook - useClipboard

前言

在Web开发中，我们经常会遇到需要操作剪切板的场景，比如复制一段代码、一个链接或者一些文本信息。React通过自定义Hook让这个过程变得既简单又高效。

本文将教你如何封装一个 useClipboard Hook来操作浏览器的剪切板。

开始封装 useClipboard Hook

要创建一个 useClipboard Hook，我们需要使用两个基础的Hook: useState 和 useEffect，以及浏览器提供的 Clipboard API。

第一步: 创建Hook文件

useClipboard.js:

javascript
import { useState, useCallback } from 'react';

// 这是我们的Hook
const useClipboard = () => {
    const [isCopied, setIsCopied] = useState(false);

    // copy函数用于复制文本到剪切板
    const copy = useCallback(async (text) => {
        if (!navigator.clipboard) {
            console.warn('浏览器不支持剪切板');
            return false;
        }

        try {
            await navigator.clipboard.writeText(text);
            setIsCopied(true);
            setTimeout(() => setIsCopied(false), 1500); // 1.5秒后重置状态
            return true;
        } catch (error) {
            console.warn('复制失败', error);
            setIsCopied(false);
            return false;
        }
    }, []);

    return { isCopied, copy };
};

export default useClipboard;

第二步: 使用Hook

现在我们已经封装好了 useClipboard，可以在组件中使用它来进行复制操作。

SomeComponent.js:

javascript
import React from 'react';
import useClipboard from './useClipboard';

const SomeComponent = () => {
    const { isCopied, copy } = useClipboard();

    const textToCopy = '这是要复制的文本!';

    return (
        <div>
            <button onClick={() => copy(textToCopy)}>
                {isCopied ? '已复制!' : '复制文本'}
            </button>
        </div>
    );
};

export default SomeComponent;

这个组件包含了一个按钮，点击按钮时会触发 copy函数，并将定义好的文本复制到剪切板上。isCopied状态用于提示用户文本是否已成功复制。

第三步: 增强体验

为了提升用户体验，我们可以添加一些反馈机制，比如复制成功时显示提示信息。我们在前面已经通过状态 isCopied做了简单的反馈，但这还不够。我们可以使用第三方库如 react-toastify来显示更友好的通知。

总结

封装 useClipboard Hook使我们可以轻松地在多个组件中复用剪切板的逻辑，同时保持代码的干净和组织。这种自定义Hook的方法可以让我们的代码保持DRY（Don't Repeat Yourself）原则，提高开发效率。