كيفية إضافة ميزة النسخ إلى الحافظة إلى تطبيق React الخاص بك

يمكن أن يستغرق نسخ المعلومات يدويًا، سواء كانت مقتطفات من التعليمات البرمجية أو روابط URL أو أجزاء نصية، وقتًا طويلاً وعرضة للأخطاء، خاصة على الأجهزة المحمولة حيث تكون الشاشة صغيرة. لا تؤدي إضافة وظيفة "نسخ إلى الحافظة" إلى توفير الوقت فحسب، بل تقلل أيضًا من احتمال حدوث أخطاء وأخطاء مطبعية.

إعداد وظيفة النسخ إلى الحافظة

في تطبيق React، أنشئ مكونًا جديدًا باسم زر النسخ. يقبل هذا المكون النص الذي يجب نسخه إلى الحافظة.

إذا لم يكن لديك مشروع React للعمل عليه، استخدم الأداة المساعدة لإنشاء تطبيق رد فعل لسقالة واحدة.

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

عند النقر عليه، يجب أن يستدعي الزر وظيفة مسماة نسخ إلى الحافظة الذي ينسخ النص إلى الحافظة.

لتنفيذ وظيفة النسخ، يمكنك استخدام واجهة برمجة تطبيقات الحافظة مباشرةً أو استخدام حزمة NPM.

سيوضح لك هذا الدليل كيفية استخدام كليهما.

استخدام Clipboard API لنسخ النص إلى الحافظة في React

ال واجهة برمجة تطبيقات الحافظة يوفر طريقة للتفاعل مع أوامر الحافظة مثل النسخ والقص واللصق.

للوصول إليه، تحتاج إلى استخدام navigator.clipboard الكائن متاح في معظم المتصفحات الحديثة. لديها عدة طرق تسمح لك بكتابة أو قراءة محتويات الحافظة.

للكتابة إلى الحافظة، استخدم writeText طريقة.

دعونا نرى كيفية تنفيذ ذلك في نسخ إلى الحافظة وظيفة زر النسخ عنصر.

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 {
thrownewError("Can't access the clipboard. Check your browser permissions.")
 }
 } catch (error) {
 alert('Error copying to clipboard:', error);
 }
};

في الوظيفة المعدلة أعلاه، فقط عندما يمنح المستخدم الإذن بالكتابة إلى الحافظة يتم الكتابة إليها. وإلا فإن الدالة ستؤدي إلى حدوث خطأ.

استخدام حزمة NPM للنسخ إلى الحافظة في React

إذا كنت لا ترغب في استخدام واجهة برمجة تطبيقات الحافظة مباشرة، فهناك حزم NPM المتعددة يمكنك استخدام بدلا من ذلك. بالنسبة لتطبيقات التفاعل، يمكنك استخدام رد فعل نسخة إلى الحافظة طَرد. إنها تحظى بشعبية كبيرة مع أكثر من مليون عملية تنزيل أسبوعية كما أنها سهلة الاستخدام.

قم بتثبيته في تطبيق React الخاص بك عن طريق تشغيل الأمر التالي في الوحدة الطرفية:

npm install react-copy-to-clipboard

بمجرد التثبيت، قم باستيراد ملف نسخ إلى الحافظة مكون من رد فعل نسخة إلى الحافظة داخل ال زر النسخ عنصر.

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

ال نسخ إلى الحافظة يقبل المكون النص الذي تريد نسخه كدعم. كما أنه يقبل أيضًا مكونًا فرعيًا يؤدي عند النقر عليه إلى تشغيل إجراء النسخ.

على سبيل المثال، استخدم الكود أدناه للنسخ إلى الحافظة باستخدام زر:

console.log(result)}>
Copy</button>
</CopyToClipboard>

لاحظ وظيفة المعالج، onCopy. ويقبل حجتين، نص و نتيجة حيث النص هو النص المنسوخ والنتيجة هي قيمة منطقية تشير إلى ما إذا كان إجراء النسخ ناجحًا أم لا.

لماذا تستخدم وظيفة النسخ إلى الحافظة؟

لقد تعلمت كيفية استخدام واجهة برمجة التطبيقات للحافظة وحزمة رد الفعل والنسخ إلى الحافظة لنسخ النص إلى الحافظة في تطبيق React. بينما يمكن لمستخدمي تطبيقك ببساطة تحديد النص واستخدام وظيفة النسخ في متصفحك، فإن النقر لنسخ النص يعد أكثر وضوحًا وأفضل لتجربة المستخدم.