نحوه افزودن کپی به ویژگی کلیپ بورد به برنامه React

یاد بگیرید که چگونه با استفاده از Clipboard API و کتابخانه react-copy-to-clipboard، این ویژگی مفید را در برنامه React خود بگنجانید.

کپی دستی اطلاعات، اعم از تکه کد، پیوندهای URL، یا قطعات متنی، می تواند زمان بر و مستعد خطا باشد، به خصوص در دستگاه های تلفن همراه که صفحه نمایش آن کوچک است. افزودن قابلیت “کپی در کلیپ بورد” نه تنها در زمان صرفه جویی می کند، بلکه احتمال خطاها و اشتباهات تایپی را نیز کاهش می دهد.

تنظیم عملکرد کپی در کلیپ بورد

در یک برنامه React، یک مؤلفه جدید به نام CopyButton ایجاد کنید. این جزء متنی را می پذیرد که باید در کلیپ بورد کپی شود.

اگر پروژه React برای کار ندارید، از ابزار Create React app برای ساخت داربست استفاده کنید.

function CopyButton({text}) {
    const copyToClipboard = () => {
        // copy to clipboard
    }
  return (
    <button onClick={copyToClipboard}>Copy</button>
  )
}

export default CopyButton

هنگامی که روی دکمه کلیک می شود، باید تابعی به نام copyToClipboard را فراخوانی کند که متن را در کلیپ بورد کپی می کند.

برای پیاده سازی عملکرد کپی، می توانید مستقیماً از API کلیپ بورد استفاده کنید یا از یک بسته NPM استفاده کنید.

این راهنما به شما نشان می دهد که چگونه از هر دو استفاده کنید.

استفاده از Clipboard API برای کپی کردن متن در Clipboard در React

Clipboard API راهی برای تعامل با دستورات کلیپ بورد مانند کپی، برش و چسباندن فراهم می کند.

برای دسترسی به آن، باید از شیء navigator.clipboard موجود در اکثر مرورگرهای مدرن استفاده کنید. چندین روش دارد که به شما امکان می دهد محتوای کلیپ بورد را بنویسید یا بخوانید.

برای نوشتن در کلیپ بورد، از روش writeText استفاده کنید.

بیایید ببینیم که چگونه این کار را در تابع copyToClipboard جزء CopyButton پیاده سازی کنیم.

const copyToClipboard = async (text) => {
    try {
      await navigator.clipboard.writeText(text);
      alert('Text copied to clipboard:', text);
    } catch (error) {
      alert('Error copying to clipboard:', error);
    }
  };

متد writeText متنی را که در کلیپ بورد کپی می کند می پذیرد. این روش ناهمزمان است، بنابراین قبل از حرکت باید از کلمه کلیدی انتظار استفاده کنید.

اگر متن در کلیپ بورد کپی شده است، یک پیام موفقیت آمیز نمایش دهید در غیر این صورت پیام خطا را به عنوان هشدار نمایش دهید.

بررسی مجوزهای مرورگر

به عنوان تمرین خوب، مهم است که اطمینان حاصل شود که کاربر به مرورگر اجازه دسترسی به کلیپ بورد را داده است. همانطور که در زیر نشان داده شده است، می توانید بررسی کنید که آیا کاربر با استفاده از navigator.permissions Web API اجازه نوشتن به کلیپ بورد را داده است یا خیر.

const copyToClipboard = async () => {
    try {
        const permissions = await navigator.permissions.query({name: "clipboard-write"})
        if (permissions.state === "granted" || permissions.state === "prompt") {
            await navigator.clipboard.writeText(text);
            alert('Text copied to clipboard!');
        } else {
            throw new Error("Can't access the clipboard. Check your browser permissions.")
        }
    } catch (error) {
        alert('Error copying to clipboard:', error);
    }
};

در تابع اصلاح شده بالا، تنها زمانی که کاربر اجازه نوشتن در کلیپ بورد را داده باشد، روی آن می نویسند. در غیر این صورت، تابع خطا می دهد.

استفاده از بسته NPM برای کپی در کلیپ بورد در React

اگر نمی‌خواهید مستقیماً از Clipboard API استفاده کنید، چندین بسته NPM وجود دارد که می‌توانید به جای آن استفاده کنید. برای برنامه های React، می توانید از بسته react-copy-to-clipboard استفاده کنید. با بیش از 1 میلیون بارگیری در هفته بسیار محبوب است و همچنین استفاده از آن آسان است.

با اجرای دستور زیر در ترمینال آن را در برنامه React خود نصب کنید:

npm install react-copy-to-clipboard

پس از نصب، مؤلفه CopyToClipboard را از react-copy-to-clipboard به مؤلفه CopyButton وارد کنید.

import {CopyToClipboard} from 'react-copy-to-clipboard';

مؤلفه CopyToClipboard متنی را که می‌خواهید کپی کنید به عنوان یک پایه می‌پذیرد. همچنین یک مؤلفه فرزند را می پذیرد که وقتی روی آن کلیک می شود، عمل کپی را فعال می کند.

به عنوان مثال، از کد زیر برای کپی کردن در کلیپ بورد با یک دکمه استفاده کنید:

<CopyToClipboard text={text} onCopy={(text, result) => console.log(result)}>
   <button>Copy</button>
</CopyToClipboard>

به تابع handler، onCopy توجه کنید. دو آرگومان متن و نتیجه را می پذیرد که در آن متن متن کپی شده است و نتیجه یک بولی است که نشان می دهد آیا عمل کپی موفقیت آمیز بوده است یا خیر.

چرا از تابع کپی در کلیپ بورد استفاده کنیم؟

شما یاد گرفته اید که چگونه از API کلیپ بورد و بسته react-copy-to-clipboard برای کپی کردن متن در کلیپ بورد در برنامه React استفاده کنید. در حالی که کاربران برنامه شما می توانند به سادگی متن را انتخاب کنند و از قابلیت کپی مرورگر شما استفاده کنند، کلیک کردن برای کپی متن ساده تر و برای تجربه کاربری بهتر است.

منبع مقاله