Cara Menambahkan Fitur Salin ke Clipboard ke Aplikasi React Anda
Table of content:
Menyalin informasi secara manual, baik itu cuplikan kode, tautan URL, atau fragmen teks dapat memakan waktu dan rawan kesalahan, terutama pada perangkat seluler yang layarnya kecil. Menambahkan fungsi “salin ke papan klip” tidak hanya menghemat waktu tetapi juga mengurangi potensi kesalahan dan kesalahan ketik.
Menyiapkan Fungsi Salin ke Papan Klip
Di aplikasi React, buat komponen baru bernama Tombol Salin. Komponen ini menerima teks yang harus disalin ke clipboard.
Baca Juga:
Jika Anda tidak memiliki proyek React untuk dikerjakan, gunakan utilitas buat aplikasi reaksi untuk membuat proyek tersebut.
function CopyButton({text}) {
const copyToClipboard = () => {
}
return (
<button onClick={copyToClipboard}>Copy</button>
)
}export default CopyButton
Saat diklik, tombol tersebut akan memanggil fungsi bernama menyalin ke clipboard yang menyalin teks ke clipboard.
Untuk mengimplementasikan fungsionalitas penyalinan, Anda dapat menggunakan API clipboard secara langsung atau menggunakan paket NPM.
Panduan ini akan menunjukkan cara menggunakan keduanya.
Menggunakan API Clipboard untuk Menyalin Teks ke Clipboard di React
Itu API Papan Klip menyediakan cara untuk berinteraksi dengan perintah clipboard seperti salin, potong, dan tempel.
Untuk mengaksesnya, Anda perlu menggunakan navigator.papan klip objek tersedia di sebagian besar browser modern. Ini memiliki beberapa metode yang memungkinkan Anda menulis atau membaca konten clipboard.
Untuk menulis ke clipboard, gunakan tulisTeks metode.
Mari kita lihat bagaimana menerapkannya di menyalin ke clipboard fungsi dari Tombol Salin komponen.
const copyToClipboard = async (text) => {
try {
await navigator.clipboard.writeText(text);
alert('Text copied to clipboard:', text);
} catch (error) {
alert('Error copying to clipboard:', error);
}
};
Itu tulisTeks metode menerima teks yang akan disalin ke clipboard. Metode ini tidak sinkron, jadi Anda harus menggunakan kata kunci menunggu sebelum melanjutkan.
Jika teks disalin ke clipboard, tampilkan pesan sukses jika tidak, tampilkan pesan kesalahan sebagai peringatan.
Memeriksa Izin Peramban
Sebagai praktik yang baik, penting untuk memastikan bahwa pengguna telah memberikan izin browser untuk mengakses clipboard. Anda dapat memeriksa apakah pengguna telah memberikannya tulis clipboard izin menggunakan navigator.izin Web API sebelum disalin ke clipboard seperti yang ditunjukkan di bawah ini.
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 {
throw new Error("Can't access the clipboard. Check your browser permissions.")
}
} catch (error) {
alert('Error copying to clipboard:', error);
}
};
Dalam fungsi yang dimodifikasi di atas, hanya ketika pengguna telah memberikan izin untuk menulis ke clipboard, mereka akan menulis ke sana. Jika tidak, fungsi tersebut akan menimbulkan kesalahan.
Menggunakan Paket NPM untuk Menyalin ke Clipboard di React
Jika Anda tidak ingin menggunakan API clipboard secara langsung, ada beberapa paket NPM yang dapat Anda gunakan. Untuk aplikasi react, Anda dapat menggunakan reaksi-salin-ke-papan klip kemasan. Ini cukup populer dengan lebih dari 1 juta unduhan mingguan dan juga mudah digunakan.
Instal di aplikasi React Anda dengan menjalankan perintah berikut di terminal:
npm install react-copy-to-clipboard
Setelah terinstal, impor Menyalin ke clipboard komponen dari reaksi-salin-ke-papan klip ke dalam Tombol Salin komponen.
import {CopyToClipboard} from 'react-copy-to-clipboard';
Itu Menyalin ke clipboard komponen menerima teks yang ingin Anda salin sebagai prop. Ia juga menerima komponen anak yang ketika diklik akan memicu tindakan penyalinan.
Misalnya, gunakan kode di bawah ini untuk menyalin ke clipboard dengan sebuah tombol:
<CopyToClipboard text={text} onCopy={(text, result) => console.log(result)}>
<button>Copy</button>
</CopyToClipboard>
Perhatikan fungsi handler, diSalinan. Ia menerima dua argumen, teks Dan hasil dimana teks adalah teks yang disalin dan hasilnya adalah boolean yang menunjukkan apakah tindakan penyalinan berhasil atau tidak.
Mengapa Menggunakan Fungsi Salin ke Papan Klip?
Anda telah mempelajari cara menggunakan API clipboard dan paket react-copy-to-clipboard untuk menyalin teks ke clipboard dalam aplikasi React. Meskipun pengguna aplikasi Anda cukup memilih teks dan menggunakan fungsi penyalinan di browser Anda, mengeklik untuk menyalin teks lebih mudah dan lebih baik untuk pengalaman pengguna.
Artikel Terkait
