כיצד להוסיף תכונת עותק ללוח לאפליקציית React שלך

העתקה ידנית של מידע, בין אם זה קטעי קוד, קישורי כתובות אתרים או קטעי טקסט יכולה להיות גוזלת זמן ונוטה לשגיאות, במיוחד במכשירים ניידים שבהם המסך קטן. הוספת פונקציונליות "העתק ללוח" לא רק חוסכת זמן אלא גם מפחיתה את הפוטנציאל לשגיאות ושגיאות הקלדה.

הגדרת פונקציונליות העתקה ללוח

באפליקציית React, צור רכיב חדש בשם CopyButton. רכיב זה מקבל טקסט שעליו להעתיק ללוח.

אם אין לך פרויקט React לעבוד עליו, השתמש בכלי היישום create react לפיגום אחד.

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

כאשר לוחצים עליו, הכפתור אמור לקרוא לפונקציה בשם העתק ללוח שמעתיק את הטקסט ללוח.

כדי ליישם את פונקציונליות ההעתקה, אתה יכול להשתמש ישירות ב-API של הלוח או להשתמש בחבילת NPM.

מדריך זה יראה לך כיצד להשתמש בשניהם.

שימוש ב-API של Clipboard כדי להעתיק טקסט ללוח ב-React

ה ממשק API של לוח מספק דרך לקיים אינטראקציה עם פקודות לוח כגון העתקה, גזירה והדבקה.

כדי לגשת אליו, עליך להשתמש ב- navigator.clipboard אובייקט זמין ברוב הדפדפנים המודרניים. יש לו מספר שיטות המאפשרות לך לכתוב או לקרוא את התוכן של הלוח.

כדי לכתוב ללוח, השתמש ב- לכתובטקסט שיטה.

בואו נראה איך ליישם את זה ב- העתק ללוח פונקציה של 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);
 }
 };

ה לכתובטקסט השיטה מקבלת את הטקסט שהיא תעתיק ללוח. שיטה זו היא אסינכרונית, לכן עליך להשתמש במילת המפתח await לפני שתמשיך הלאה.

אם הטקסט הועתק ללוח, הצג הודעת הצלחה אחרת הצג את הודעת השגיאה כהתראה.

בדיקת הרשאות דפדפן

כתרגול טוב, חשוב לוודא שהמשתמש העניק לדפדפן הרשאה לגשת ללוח. אתה יכול לבדוק אם המשתמש העניק לוח-כתיבה הרשאה באמצעות 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

אם אינך רוצה להשתמש ישירות ב-API של הלוח, יש מספר חבילות NPM אתה יכול להשתמש במקום. עבור יישומי תגובה, אתה יכול להשתמש ב- להגיב-העתק ללוח חֲבִילָה. זה די פופולרי עם יותר ממיליון הורדות שבועיות והוא גם קל לשימוש.

התקן אותו באפליקציית React שלך על ידי הפעלת הפקודה הבאה בטרמינל:

npm install react-copy-to-clipboard

לאחר ההתקנה, ייבא את ה העתק ללוח רכיב מ להגיב-העתק ללוח לתוך ה CopyButton רְכִיב.

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

ה העתק ללוח רכיב מקבל את הטקסט שברצונך להעתיק כאביזר. הוא גם מקבל רכיב צאצא שכאשר לוחצים עליו מפעיל את פעולת ההעתקה.

לדוגמה, השתמש בקוד שלהלן כדי להעתיק ללוח עם כפתור:

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

שימו לב לפונקציית המטפל, onCopy. הוא מקבל שני טיעונים, טֶקסט ו תוֹצָאָה כאשר טקסט הוא הטקסט שהועתק והתוצאה היא בוליאני המציין אם פעולת ההעתקה הצליחה או לא.

מדוע להשתמש בפונקציית העתק ללוח?

למדת כיצד להשתמש ב-API של הלוח ובחבילת react-copy-to-clipboard כדי להעתיק טקסט ללוח באפליקציית React. בעוד שמשתמשי האפליקציה שלך יכולים פשוט לבחור את הטקסט ולהשתמש בפונקציונליות ההעתקה של הדפדפן שלך, לחיצה כדי להעתיק טקסט היא פשוטה יותר וטובה יותר לחוויית המשתמש.