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.
Spis treści:
Konfigurowanie funkcji kopiowania do schowka
W aplikacji React utwórz nowy komponent o nazwie CopyButton. 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, aby stworzyć szkielet takiego projektu.
function CopyButton({text}) {
const copyToClipboard = () => {
}
return (
<button onClick={copyToClipboard}>Copy</button>
)
}export default CopyButton
Po kliknięciu przycisk powinien wywołać funkcję o nazwie copyToClipboard, która 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 obiektu navigator.clipboard dostępnego w większości nowoczesnych przeglądarek. Posiada kilka metod, które pozwalają na zapisanie lub odczytanie zawartości schowka.
Aby zapisać do schowka, użyj metody writeText.
Zobaczmy, jak zaimplementować to w funkcji copyToClipboard komponentu CopyButton.
const copyToClipboard = async (text) => {
try {
await navigator.clipboard.writeText(text);
alert('Text copied to clipboard:', text);
} catch (error) {
alert('Error copying to clipboard:', error);
}
};
Metoda writeText 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 przyznał uprawnienia do zapisu w schowku, korzystając z internetowego interfejsu API navigator.permissions 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 {
throw new Error("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, możesz zamiast tego użyć wielu pakietów NPM. 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 komponent CopyToClipboard z funkcji „reaguj na kopiowanie do schowka” do komponentu CopyButton.
import {CopyToClipboard} from 'react-copy-to-clipboard';
Komponent CopyToClipboard 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:
<CopyToClipboard text={text} onCopy={(text, result) => console.log(result)}>
<button>Copy</button>
</CopyToClipboard>
Zwróć uwagę na funkcję obsługi onCopy. Akceptuje 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ę, jak używać 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.