Jak dodać funkcję Kopiuj do schowka do swojej aplikacji React

Ręczne kopiowanie informacji, niezależnie od tego, czy są to fragmenty kodu, łącza URL czy fragmenty tekstu, może być czasochłonne i podatne na błędy, szczególnie na urządzeniach mobilnych z małym ekranem. Dodanie funkcji „kopiuj do schowka” nie tylko oszczędza czas, ale także zmniejsza ryzyko błędów i literówek.

Konfigurowanie funkcji kopiowania do schowka

W aplikacji React utwórz nowy komponent o nazwie Przycisk Kopiuj. Komponent ten akceptuje tekst, który powinien skopiować do schowka.

Jeśli nie masz projektu React do pracy, użyj narzędzia do tworzenia aplikacji reagującej zbudować rusztowanie.

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

Po kliknięciu przycisk powinien wywołać funkcję o nazwie skopiuj do schowka który kopiuje tekst do schowka.

Aby zaimplementować funkcję kopiowania, możesz skorzystać bezpośrednio z API schowka lub skorzystać z pakietu NPM.

W tym przewodniku dowiesz się, jak używać obu.

Używanie API Clipboard do kopiowania tekstu do schowka w React

The API schowka umożliwia interakcję z poleceniami schowka, takimi jak kopiowanie, wycinanie i wklejanie.

Aby uzyskać do niego dostęp, należy skorzystać z nawigator.schowek obiekt dostępny w większości nowoczesnych przeglądarek. Posiada kilka metod, które pozwalają na zapisanie lub odczytanie zawartości schowka.

Aby zapisać w schowku, użyj opcji napiszTekst metoda.

Zobaczmy, jak zaimplementować to w skopiuj do schowka funkcja Przycisk Kopiuj część.

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

The napiszTekst metoda akceptuje tekst, który skopiuje do schowka. Ta metoda jest asynchroniczna, więc zanim przejdziesz dalej, musisz użyć słowa kluczowego Wait.

Jeśli tekst zostanie skopiowany do schowka, wyświetl komunikat o powodzeniu, w przeciwnym razie wyświetl komunikat o błędzie jako ostrzeżenie.

Sprawdzanie uprawnień przeglądarki

Dobrą praktyką jest upewnienie się, że użytkownik udzielił przeglądarce pozwolenia na dostęp do schowka. Możesz sprawdzić, czy użytkownik udzielił zgody zapis w schowku pozwolenie na korzystanie z uprawnienia nawigatora Web API przed skopiowaniem do schowka, jak pokazano poniżej.

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

W zmodyfikowanej powyżej funkcji zapisywanie odbywa się tylko wtedy, gdy użytkownik udzielił pozwolenia na zapis do schowka. W przeciwnym razie funkcja zgłasza błąd.

Używanie pakietu NPM do kopiowania do schowka w React

Jeśli nie chcesz bezpośrednio korzystać z interfejsu API schowka, istnieje taka możliwość wiele pakietów NPM możesz użyć zamiast tego. W przypadku aplikacji reagujących możesz użyć metody zareaguj-kopiuj-do-schowka pakiet. Jest dość popularny z ponad 1 milionem pobrań tygodniowo i jest również łatwy w użyciu.

Zainstaluj go w swojej aplikacji React, uruchamiając następującą komendę w terminalu:

npm install react-copy-to-clipboard

Po zainstalowaniu zaimportuj plik Skopiuj do schowka składnik z zareaguj-kopiuj-do-schowka w Przycisk Kopiuj część.

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

The Skopiuj do schowka komponent akceptuje tekst, który chcesz skopiować, jako rekwizyt. Akceptuje także komponent podrzędny, którego kliknięcie uruchamia akcję kopiowania.

Na przykład użyj poniższego kodu, aby skopiować do schowka za pomocą przycisku:

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

Zwróć uwagę na funkcję obsługi, naKopiuj. Przyjmuje dwa argumenty, tekst I wynik gdzie tekst jest skopiowanym tekstem, a wynikiem jest wartość logiczna wskazująca, czy akcja kopiowania zakończyła się sukcesem, czy nie.

Dlaczego warto używać funkcji kopiowania do schowka?

Nauczyłeś się korzystać z API schowka i pakietu reagującego na kopiowanie do schowka, aby kopiować tekst do schowka w aplikacji React. Chociaż użytkownicy Twojej aplikacji mogą po prostu zaznaczyć tekst i skorzystać z funkcji kopiowania w przeglądarce, kliknięcie w celu skopiowania tekstu jest prostsze i lepsze dla użytkownika.