अपने रिएक्ट ऐप में कॉपी टू क्लिपबोर्ड फीचर कैसे जोड़ें

जानकारी को मैन्युअल रूप से कॉपी करना, चाहे वह कोड स्निपेट, यूआरएल लिंक, या टेक्स्ट टुकड़े हों, समय लेने वाली और त्रुटि-प्रवण हो सकती है, खासकर मोबाइल उपकरणों पर जहां स्क्रीन छोटी है। "क्लिपबोर्ड पर कॉपी करें" कार्यक्षमता जोड़ने से न केवल समय की बचत होती है बल्कि त्रुटियों और टाइपो की संभावना भी कम हो जाती है।

कॉपी को क्लिपबोर्ड कार्यक्षमता पर सेट करना

रिएक्ट ऐप में, नाम का एक नया घटक बनाएं कॉपीबटन. यह घटक उस पाठ को स्वीकार करता है जिसे उसे क्लिपबोर्ड पर कॉपी करना चाहिए।

यदि आपके पास काम करने के लिए कोई रिएक्ट प्रोजेक्ट नहीं है, क्रिएट रिएक्ट ऐप उपयोगिता का उपयोग करें एक मचान बनाना.

functionCopyButton({text}) {
const copyToClipboard = () => {
// copy to clipboard
 }
return (
Copy</button>
 )
}
exportdefault 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);
 }
 };

लेख लिखें विधि उस पाठ को स्वीकार करती है जिसे वह क्लिपबोर्ड पर कॉपी करेगा। यह विधि अतुल्यकालिक है, इसलिए आगे बढ़ने से पहले आपको wait कीवर्ड का उपयोग करना होगा।

यदि पाठ को क्लिपबोर्ड पर कॉपी किया गया है, तो एक सफलता संदेश प्रदर्शित करें अन्यथा त्रुटि संदेश को चेतावनी के रूप में प्रदर्शित करें।

ब्राउज़र अनुमतियाँ जाँच रहा है

अच्छे अभ्यास के रूप में, यह सुनिश्चित करना महत्वपूर्ण है कि उपयोगकर्ता ने ब्राउज़र को क्लिपबोर्ड तक पहुंचने की अनुमति दी है। आप जांच सकते हैं कि उपयोगकर्ता ने अनुमति दी है या नहीं क्लिपबोर्ड-लिखें का उपयोग करने की अनुमति नेविगेटर.अनुमतियाँ क्लिपबोर्ड पर कॉपी करने से पहले वेब एपीआई जैसा कि नीचे दिखाया गया है।

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);
 }
};

उपरोक्त संशोधित फ़ंक्शन में, उपयोगकर्ता केवल तभी उस पर लिख रहा है जब उसने क्लिपबोर्ड पर लिखने की अनुमति दी हो। अन्यथा, फ़ंक्शन एक त्रुटि उत्पन्न करता है।

रिएक्ट में क्लिपबोर्ड पर कॉपी करने के लिए एनपीएम पैकेज का उपयोग करना

यदि आप सीधे क्लिपबोर्ड एपीआई का उपयोग नहीं करना चाहते हैं, तो हैं एकाधिक एनपीएम पैकेज आप इसके बजाय उपयोग कर सकते हैं. प्रतिक्रिया अनुप्रयोगों के लिए, आप इसका उपयोग कर सकते हैं प्रतिक्रिया-कॉपी-टू-क्लिपबोर्ड पैकेट। यह 1 मिलियन से अधिक साप्ताहिक डाउनलोड के साथ काफी लोकप्रिय है और इसका उपयोग करना भी आसान है।

टर्मिनल में निम्नलिखित कमांड चलाकर इसे अपने रिएक्ट एप्लिकेशन में इंस्टॉल करें:

npm install react-copy-to-clipboard

एक बार इंस्टॉल हो जाने पर, आयात करें क्लिपबोर्ड पर कॉपी करें से घटक प्रतिक्रिया-कॉपी-टू-क्लिपबोर्ड में कॉपीबटन अवयव।

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

क्लिपबोर्ड पर कॉपी करें घटक उस पाठ को स्वीकार करता है जिसे आप प्रोप के रूप में कॉपी करना चाहते हैं। यह एक चाइल्ड घटक को भी स्वीकार करता है जिस पर क्लिक करने पर कॉपी कार्रवाई शुरू हो जाती है।

उदाहरण के लिए, एक बटन के साथ क्लिपबोर्ड पर कॉपी करने के लिए नीचे दिए गए कोड का उपयोग करें:

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

हैंडलर फ़ंक्शन पर ध्यान दें, onCopy. यह दो तर्क स्वीकार करता है, मूलपाठ और परिणाम जहां टेक्स्ट कॉपी किया गया टेक्स्ट है और परिणाम एक बूलियन है जो दर्शाता है कि कॉपी कार्रवाई सफल थी या नहीं।

कॉपी टू क्लिपबोर्ड फ़ंक्शन का उपयोग क्यों करें?

आपने रिएक्ट एप्लिकेशन में क्लिपबोर्ड पर टेक्स्ट कॉपी करने के लिए क्लिपबोर्ड एपीआई और रिएक्ट-कॉपी-टू-क्लिपबोर्ड पैकेज का उपयोग करना सीख लिया है। जबकि आपके एप्लिकेशन के उपयोगकर्ता केवल टेक्स्ट का चयन कर सकते हैं और आपके ब्राउज़र की कॉपी कार्यक्षमता का उपयोग कर सकते हैं, टेक्स्ट को कॉपी करने के लिए क्लिक करना उपयोगकर्ता अनुभव के लिए अधिक सरल और बेहतर है।