Copy To Clipboard Javascript React

4 min read Jun 22, 2024

Cara Menyalin Teks ke Clipboard dengan JavaScript di React

Membuat tombol yang memungkinkan pengguna menyalin teks ke clipboard adalah fitur yang umum dalam aplikasi web. Di React, proses ini dapat dilakukan dengan memanfaatkan API Clipboard dan beberapa baris kode JavaScript. Berikut adalah panduan langkah demi langkah untuk mengimplementasikan fitur copy to clipboard dalam komponen React Anda:

1. Mengimpor Pustaka Clipboard

Anda dapat menggunakan pustaka clipboard-copy yang tersedia di npm untuk mempermudah proses menyalin teks ke clipboard.

import { useState } from 'react';
import copy from 'clipboard-copy'; 

function MyComponent() {
  const [copied, setCopied] = useState(false);

  const handleCopy = () => {
    copy('Teks yang ingin disalin')
      .then(() => {
        setCopied(true);
        // Tambahkan logic untuk menampilkan pesan sukses
      })
      .catch((err) => {
        console.error('Gagal menyalin ke clipboard:', err);
        // Tambahkan logic untuk menampilkan pesan error
      });
  };

  return (
    
      
      {copied && Teks berhasil disalin!}
    
  );
}

export default MyComponent;

2. Menangani Peristiwa Klik Tombol

Fungsi handleCopy() dipanggil saat tombol diklik. Di dalam fungsi ini, Anda akan menggunakan metode copy() dari pustaka clipboard-copy untuk menyalin teks yang ingin Anda salin.

3. Menampilkan Pesan Konfirmasi

Setelah teks berhasil disalin, Anda dapat menampilkan pesan konfirmasi ke pengguna untuk memberitahukan bahwa teks sudah berhasil disalin. Dalam kode di atas, state copied digunakan untuk menampilkan pesan "Teks berhasil disalin!" setelah tombol diklik.

4. Menangani Kesalahan

Jika terjadi kesalahan saat menyalin teks ke clipboard, Anda dapat menampilkan pesan kesalahan kepada pengguna. Hal ini dilakukan dengan menambahkan blok catch dalam fungsi handleCopy().

Penjelasan

Fungsi copy() dari pustaka clipboard-copy berfungsi untuk menyalin teks yang ditentukan ke clipboard.
State copied digunakan untuk melacak apakah teks telah berhasil disalin atau belum.
Fungsi handleCopy() menangani peristiwa klik tombol dan memicu proses menyalin teks.
Pesan konfirmasi ditampilkan berdasarkan state copied.
Blok catch digunakan untuk menangani kesalahan yang mungkin terjadi saat proses menyalin teks.

Kesimpulan

Mengimplementasikan fitur copy to clipboard di React sangat mudah dengan menggunakan pustaka clipboard-copy. Dengan mengikuti langkah-langkah di atas, Anda dapat dengan mudah menambahkan fungsi ini ke dalam aplikasi React Anda.

Catatan:

Pastikan untuk mengimport pustaka clipboard-copy dengan benar di proyek Anda.
Anda dapat menyesuaikan pesan konfirmasi dan pesan kesalahan sesuai dengan kebutuhan.
Untuk pengalaman pengguna yang lebih baik, pertimbangkan untuk menambahkan animasi atau efek visual lainnya saat teks disalin.