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

Ręczne przenoszenie danych, takich jak fragmenty kodu, adresy URL czy partie tekstu, bywa nużące i narażone na błędy, szczególnie na urządzeniach mobilnych z ograniczoną przestrzenią ekranu. Implementacja przycisku „skopiuj do schowka” nie tylko przyspiesza pracę, ale też minimalizuje ryzyko pomyłek i literówek.

Wdrażanie funkcjonalności kopiowania do schowka

W aplikacji React stwórz nowy komponent o nazwie CopyButton. Ten komponent będzie przyjmował tekst jako argument, który zostanie przeniesiony do schowka.

Jeśli nie posiadasz działającego projektu React, wykorzystaj narzędzie do generowania aplikacji React, aby utworzyć bazowy projekt.

 function CopyButton({text}) {
    const copyToClipboard = () => {
        
    }
  return (
    <button onClick={copyToClipboard}>Kopiuj</button>
  )
}
export default CopyButton
 

Po naciśnięciu, przycisk powinien uruchomić funkcję o nazwie copyToClipboard, która przekopiuje wskazany tekst do pamięci schowka.

Aby wprowadzić funkcję kopiowania, możesz posłużyć się bezpośrednio API schowka, albo skorzystać z biblioteki NPM.

W tym poradniku poznasz oba te podejścia.

Wykorzystanie API Schowka do przesyłania tekstu do schowka w React

API Schowka oferuje interakcję z operacjami schowka, takimi jak kopiowanie, wycinanie oraz wklejanie.

Aby go użyć, należy skorzystać z obiektu navigator.clipboard, dostępnego w większości aktualnych przeglądarek. Udostępnia on szereg metod pozwalających na zapisywanie i odczytywanie danych ze schowka.

Do zapisywania w schowku służy metoda writeText.

Prześledźmy, jak zaimplementować to w funkcji copyToClipboard komponentu CopyButton.

 const copyToClipboard = async (text) => {
    try {
      await navigator.clipboard.writeText(text);
      alert('Tekst skopiowany do schowka:', text);
    } catch (error) {
      alert('Błąd podczas kopiowania do schowka:', error);
    }
  };

Metoda writeText przyjmuje jako argument tekst, który ma zostać przeniesiony do schowka. Jest to metoda asynchroniczna, dlatego przed dalszym działaniem należy użyć słowa kluczowego await.

Jeśli tekst zostanie pomyślnie skopiowany do schowka, wyświetl komunikat informujący o sukcesie. W przeciwnym wypadku wyświetl komunikat o błędzie jako ostrzeżenie.

Weryfikacja uprawnień przeglądarki

Zaleca się upewnienie się, czy użytkownik udzielił przeglądarce zgody na dostęp do schowka. Możesz to sprawdzić za pomocą internetowego API navigator.permissions, analizując czy użytkownik przyznał uprawnienia do zapisu w schowku, przed podjęciem próby kopiowania, jak w przykładzie 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('Tekst skopiowany do schowka!');
        } else {
            throw new Error("Brak dostępu do schowka. Sprawdź uprawnienia przeglądarki.")
        }
    } catch (error) {
        alert('Błąd podczas kopiowania do schowka:', error);
    }
};

W zmodyfikowanej funkcji zapis do schowka nastąpi tylko wtedy, gdy użytkownik wyraził zgodę na taką operację. W przeciwnym wypadku funkcja zwróci błąd.

Zastosowanie pakietu NPM do kopiowania do schowka w React

Jeśli nie chcesz wykorzystywać bezpośrednio interfejsu API schowka, możesz zamiast tego skorzystać z jednego z licznych pakietów NPM. W przypadku aplikacji React możesz użyć pakietu react-copy-to-clipboard. Cieszy się on sporą popularnością (ponad milion pobrań tygodniowo) i jest prosty w obsłudze.

Aby go zainstalować w aplikacji React, wpisz w terminalu poniższą komendę:

 npm install react-copy-to-clipboard

Po pomyślnej instalacji, zaimportuj komponent CopyToClipboard z biblioteki „react-copy-to-clipboard” do komponentu CopyButton.

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

Komponent CopyToClipboard przyjmuje tekst, który ma zostać skopiowany, jako parametr (prop). Przyjmuje również komponent potomny, którego kliknięcie wywołuje akcję kopiowania.

Na przykład, aby skopiować dane do schowka za pomocą przycisku, użyj następującego kodu:

 <CopyToClipboard text={text} onCopy={(text, result) => console.log(result)}>
   <button>Kopiuj</button>
</CopyToClipboard>

Zwróć uwagę na funkcję obsługi onCopy. Przyjmuje ona dwa argumenty: tekst (przekopiowany tekst) i wynik (wartość boolowska, wskazująca powodzenie lub niepowodzenie operacji kopiowania).

Dlaczego warto stosować funkcję kopiowania do schowka?

Poznałeś metody wykorzystania API schowka i pakietu react-copy-to-clipboard do kopiowania danych do schowka w aplikacji React. Pomimo tego, że użytkownicy Twojej aplikacji mogą zaznaczyć tekst i użyć opcji kopiowania w przeglądarce, kliknięcie przycisku w celu przeniesienia tekstu do schowka jest prostsze i bardziej intuicyjne dla użytkownika.