Come aggiungere la funzionalità Copia negli appunti alla tua app React

La copia manuale delle informazioni, siano essi frammenti di codice, collegamenti URL o frammenti di testo, può richiedere molto tempo ed è soggetta a errori, soprattutto sui dispositivi mobili con schermo piccolo. L'aggiunta della funzionalità "copia negli appunti" non solo fa risparmiare tempo, ma riduce anche il rischio di errori ed errori di battitura.

Configurazione della funzionalità Copia negli Appunti

In un'app React, crea un nuovo componente denominato CopiaPulsante. Questo componente accetta il testo che deve copiare negli appunti.

Se non hai un progetto React su cui lavorare, utilizzare l'utilità dell'app Crea reazione all'impalcatura uno.

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

Quando si fa clic, il pulsante dovrebbe chiamare una funzione denominata copia negli appunti che copia il testo negli appunti.

Per implementare la funzionalità di copia, puoi utilizzare direttamente l'API degli appunti o utilizzare un pacchetto NPM.

Questa guida ti mostrerà come utilizzarli entrambi.

Utilizzo dell'API Appunti per copiare il testo negli appunti in React

IL API degli appunti fornisce un modo per interagire con i comandi degli appunti come copia, taglia e incolla.

Per accedervi è necessario utilizzare il navigatore.appunti oggetto disponibile nella maggior parte dei browser moderni. Ha diversi metodi che ti permettono di scrivere o leggere il contenuto degli appunti.

Per scrivere negli appunti, utilizzare il file writeText metodo.

Vediamo come implementarlo nel file copia negli appunti funzione del CopiaPulsante componente.

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

IL writeText Il metodo accetta il testo che copierà negli appunti. Questo metodo è asincrono, quindi devi utilizzare la parola chiave wait prima di procedere.

Se il testo viene copiato negli appunti, visualizza un messaggio di successo altrimenti visualizza il messaggio di errore come avviso.

Controllo delle autorizzazioni del browser

Come buona pratica, è importante assicurarsi che l'utente abbia concesso al browser l'autorizzazione per accedere agli appunti. Puoi verificare se l'utente ha concesso appunti-scrivi autorizzazione utilizzando il file navigator.permessi API Web prima di copiare negli appunti come mostrato di seguito.

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

Nella funzione modificata sopra, solo quando l'utente ha concesso il permesso di scrivere negli appunti, scriverà su di esso. Altrimenti la funzione genera un errore.

Utilizzo di un pacchetto NPM per copiare negli appunti in React

Se non desideri utilizzare direttamente l'API degli appunti, esistono più pacchetti NPM puoi usare invece. Per le applicazioni react, puoi utilizzare il file reagire-copia-negli-appunti pacchetto. È piuttosto popolare con oltre 1 milione di download settimanali ed è anche facile da usare.

Installalo nella tua applicazione React eseguendo il seguente comando nel terminale:

npm install react-copy-to-clipboard

Una volta installato, importa il file Copia negli appunti componente da reagire-copia-negli-appunti dentro CopiaPulsante componente.

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

IL Copia negli appunti Il componente accetta il testo che desideri copiare come oggetto di scena. Accetta anche un componente figlio che, quando cliccato, attiva l'azione di copia.

Ad esempio, utilizza il codice seguente per copiare negli appunti con un pulsante:

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

Nota la funzione del gestore, onCopy. Accetta due argomenti, testo E risultato dove text è il testo copiato e il risultato è un valore booleano che indica se l'azione di copia ha avuto successo o meno.

Perché utilizzare una funzione Copia negli appunti?

Hai imparato come utilizzare l'API degli appunti e il pacchetto react-copy-to-clipboard per copiare il testo negli appunti in un'applicazione React. Mentre gli utenti della tua applicazione possono semplicemente selezionare il testo e utilizzare la funzionalità di copia del tuo browser, fare clic per copiare il testo è più semplice e migliore per l'esperienza dell'utente.