React Uygulamanıza Panoya Kopyala Özelliği Nasıl Eklenir?

Kod parçacıkları, URL bağlantıları veya metin parçaları olsun, bilgilerin manuel olarak kopyalanması, özellikle ekranın küçük olduğu mobil cihazlarda zaman alıcı ve hataya açık olabilir. "Panoya kopyala" işlevini eklemek yalnızca zamandan tasarruf etmekle kalmaz, aynı zamanda hata ve yazım hatası olasılığını da azaltır.

Panoya Kopyalama İşlevini Ayarlama

React uygulamasında adlı yeni bir bileşen oluşturun. Kopyala Düğmesi. Bu bileşen panoya kopyalaması gereken metni kabul eder.

Üzerinde çalışmanız gereken bir React projeniz yoksa, create react app yardımcı programını kullanın birini iskeleye bağlamak.

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

Tıklandığında, düğme adlı bir işlevi çağırmalıdır. panoya kopyala metni panoya kopyalar.

Kopyalama işlevini uygulamak için doğrudan pano API'sini kullanabilir veya bir NPM paketi kullanabilirsiniz.

Bu kılavuz size her ikisinin de nasıl kullanılacağını gösterecektir.

React'te Metni Panoya Kopyalamak için Clipboard API'sini Kullanma

Pano API'si kopyalama, kesme ve yapıştırma gibi pano komutlarıyla etkileşim kurmanın bir yolunu sağlar.

Erişmek için şunu kullanmanız gerekir: gezgin.clipboard nesne çoğu modern tarayıcıda mevcuttur. Panonun içeriğini yazmanıza veya okumanıza izin veren çeşitli yöntemler vardır.

Panoya yazmak için şunu kullanın: metin yaz yöntem.

Bakalım bunu nasıl uygulayacağız panoya kopyala işlevi Kopyala Düğmesi bileşen.

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

metin yaz yöntem panoya kopyalayacağı metni kabul eder. Bu yöntem eşzamansızdır, dolayısıyla devam etmeden önce wait anahtar sözcüğünü kullanmanız gerekir.

Metin panoya kopyalanırsa bir başarı mesajı görüntüleyin, aksi takdirde hata mesajını bir uyarı olarak görüntüleyin.

Tarayıcı İzinlerini Kontrol Etme

İyi bir uygulama olarak, kullanıcının tarayıcıya panoya erişim izni verdiğinden emin olmak önemlidir. Kullanıcının izin verip vermediğini kontrol edebilirsiniz panoya yazma kullanarak izin gezgin.permissions Aşağıda gösterildiği gibi panoya kopyalamadan önce Web API'sini kullanın.

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

Yukarıdaki değiştirilmiş fonksiyonda, yalnızca kullanıcı panoya yazma izni verdiğinde buraya yazmaktadır. Aksi halde fonksiyon hata verir.

React'te Panoya Kopyalamak için NPM Paketi Kullanmak

Pano API'sini doğrudan kullanmak istemiyorsanız, çoklu NPM paketleri onun yerine kullanabilirsiniz. Reaksiyon uygulamaları için şunları kullanabilirsiniz: panoya kopyala tepki paket. Haftalık 1 milyondan fazla indirmeyle oldukça popülerdir ve kullanımı da kolaydır.

Terminalde aşağıdaki komutu çalıştırarak React uygulamanıza kurun:

npm install react-copy-to-clipboard

Kurulduktan sonra içe aktarın Panoya kopyala gelen bileşen panoya kopyala tepki içine Kopyala Düğmesi bileşen.

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

Panoya kopyala bileşen kopyalamak istediğiniz metni destek olarak kabul eder. Ayrıca, tıklandığında kopyalama eylemini tetikleyen bir alt bileşeni de kabul eder.

Örneğin, bir düğmeyle panoya kopyalamak için aşağıdaki kodu kullanın:

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

İşleyici işlevine dikkat edin, onCopy. İki argümanı kabul eder, metin Ve sonuç burada metin kopyalanan metindir ve sonuç, kopyalama eyleminin başarılı olup olmadığını gösteren bir boole değeridir.

Neden Panoya Kopyala İşlevini Kullanmalısınız?

Bir React uygulamasında metni panoya kopyalamak için pano API'sini ve react-copy-to-clipboard paketini nasıl kullanacağınızı öğrendiniz. Uygulamanızın kullanıcıları yalnızca metni seçip tarayıcınızın kopyalama işlevini kullanabilirken, metni kopyalamak için tıklamak daha basit ve kullanıcı deneyimi açısından daha iyidir.