Clipboard API: React'te Kopyalama ve Yapıştırma

navigator.clipboard.writeText(text), sistem panosuna bir dize yazar ve bir vaat döndürür. Bu, eski execCommand yaklaşımının modern karşılığıdır. Vaadi her zaman await ile bekleyin ve örneğin kullanıcı pano erişimini reddettiğinde oluşabilecek reddedilmeyi yönetin.

navigator.clipboard.readText(), geçerli pano içeriğini bir dize olarak okur ve ayrıca bir vaat döndürür. Okuma, clipboard-read iznini gerektirir; tarayıcı kullanıcıdan bu izni vermesini ister. Tipik React uygulamalarında pano okuma, yazmaya göre daha seyrek kullanılır.

Tarayıcılar, clipboard.writeText çağrısının yalnızca tıklama veya tuşa basma olayı gibi bir kullanıcı hareketi işleyicisi içinde yapılmasını zorunlu kılar. Bu çağrıyı bir useEffect içinde veya hareketten sonra eşzamansız olarak yapmak güvenlik hatasına neden olur. Yazma işlemini her zaman doğrudan bir onClick işleyicisinden tetikleyin.

Standart kalıp şöyledir: kullanıcı bir kopyalama düğmesine tıklar, işleyiciniz navigator.clipboard.writeText(value) çağrısını yapar, işlem başarılı olduğunda copied durumunu true olarak ayarlarsınız ve düğme geçici olarak bir onay işareti veya "Kopyalandı!" etiketini gösterir. Kısa bir gecikmeden sonra düğme normal durumuna döner.

Mantığı, bir demet döndüren useCopyToClipboard kancasında kapsülleyin: [copied, copyFn]. copied mantıksal değeri arayüz geri bildirimini yönetir, copyFn ise kopyalanacak metni alır. Kanca, eşzamansız yazma işlemini ve oluşabilecek hataları kendi içinde yöneterek bileşenlerin basit kalmasını sağlar.

Kancanın içinde, kopyalama başarılı olduktan sonra setCopied(true) çağrısıyla durumu ayarlayın ve setTimeout(() => setCopied(false), 2000) ile sıfırlama zamanlayın. Zaman aşımı ID'sini saklayın ve bileşen kaldırıldığında durum güncellemelerini önlemek için bir useEffect temizleme işleminde zaman aşımını temizleyin. Bu, "kaldırılmış bir bileşende durum güncellenemiyor" uyarısını önler.

Daha eski tarayıcılar ve HTTPS kullanmayan sayfalar Pano uygulama programlama arayüzünü desteklemez. Eski yedek çözüm geçici bir textarea oluşturur, değerini ayarlar, gövdeye ekler, document.execCommand('copy') çağrısını yapar ve öğeyi kaldırır. Bu yaklaşım eşzamanlıdır ve her yerde çalışır; ancak kullanımdan kaldırılmıştır.

Pano uygulama programlama arayüzünü kullanmadan önce şunu kontrol edin: navigator.clipboard && typeof navigator.clipboard.writeText === 'function'. Kullanılamıyorsa eski execCommand yaklaşımına geçin. Bu koruyucu kontrol, arayüzün desteklenmediği ortamlarda çalışma zamanı hatalarını önler.

Pano okuma, İzinler uygulama programlama arayüzü üzerinden kullanıcı izni gerektirir. Geçerli durumu sorgulayabilirsiniz: navigator.permissions.query({ name: 'clipboard-read' }), granted, denied veya prompt değerlerinden birine sahip bir PermissionStatus döndürür. readText() çağrıldığında tarayıcı otomatik olarak izin ister.

Pano uygulama programlama arayüzü yalnızca güvenli bağlamlarda (HTTPS veya localhost) kullanılabilir. HTTP sayfalarında navigator.clipboard değeri undefined olur. Pano içeriği hassas olabileceğinden bu bir güvenlik kısıtlamasıdır. Boş başvuru hatalarını önlemek için yöntemlerine başvurmadan önce arayüzün kullanılabilirliğini her zaman kontrol edin.

Jest tarafından kullanılan jsdom, Pano API'sini uygulamaz. Sınama kurulumunuzda onu taklit edin: Object.assign(navigator, { clipboard: { writeText: jest.fn().mockResolvedValue(undefined) } }). Bu sayede gerçek bir tarayıcı ortamı olmadan bileşeninizin writeText yöntemini doğru bağımsız değişkenle çağırdığını sınayabilirsiniz.

navigator.clipboard.writeText() tarayıcıda ne zaman güvenle çağrılabilir?

Metin kopyalamak için navigator.clipboard.writeText() yöntemini bir tıklama işleyicisinin içinde kullanın. Zaman ayarlı sıfırlama özelliğine sahip, [copied, copyFn] döndüren bir useCopyToClipboard kancası oluşturun. API'nin kullanılabilirliğini her zaman denetleyin, eski tarayıcılar için execCommand alternatifi sağlayın ve Jest sınamalarında navigator.clipboard nesnesini taklit edin.