Másolás a vágólapra funkció hozzáadása a React alkalmazáshoz

Az információk manuális másolása, legyen szó kódrészletekről, URL-linkekről vagy szövegrészletekről, időigényes és hibás lehet, különösen olyan mobileszközökön, ahol kicsi a képernyő. A „vágólapra másolás” funkció hozzáadása nemcsak időt takarít meg, hanem csökkenti a hibák és elírások lehetőségét is.

A vágólapra másolás funkció beállítása

A React alkalmazásban hozzon létre egy új nevű összetevőt CopyButton. Ez az összetevő elfogadja a szöveget, amelyet a vágólapra kell másolnia.

Ha nincs React projektje, amin dolgozhatna, használja a Create react alkalmazás segédprogramot felállványozni egyet.

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

Ha rákattint, a gombnak egy elnevezett függvényt kell meghívnia másolja a vágólapra amely a szöveget a vágólapra másolja.

A másolási funkció megvalósításához használhatja közvetlenül a vágólap API-t, vagy használhat egy NPM-csomagot.

Ez az útmutató megmutatja, hogyan kell mindkettőt használni.

A vágólap API használata szöveg vágólapra másolásához a React alkalmazásban

A Vágólap API módot ad a vágólap-parancsokkal való interakcióra, mint például a másolás, kivágás és beillesztés.

A hozzáféréshez a navigátor.vágólap objektum elérhető a legtöbb modern böngészőben. Számos módszerrel rendelkezik, amelyek lehetővé teszik a vágólap tartalmának írását vagy olvasását.

A vágólapra íráshoz használja a szöveg írása módszer.

Lássuk, hogyan lehet ezt megvalósítani a másolja a vágólapra funkciója CopyButton összetevő.

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

A szöveg írása metódus elfogadja a szöveget, amelyet a vágólapra másol. Ez a módszer aszinkron, ezért a await kulcsszót kell használnia, mielőtt továbblépne.

Ha a szöveget a vágólapra másolta, jelenítsen meg egy sikerüzenetet, ellenkező esetben a hibaüzenet riasztásként jelenjen meg.

A böngésző engedélyeinek ellenőrzése

Jó gyakorlatként fontos annak biztosítása, hogy a felhasználó engedélyt adjon a böngészőnek a vágólap eléréséhez. Ellenőrizheti, hogy a felhasználó engedélyezte-e vágólap-írás engedély használatával navigator.permissions Web API-t a vágólapra másolás előtt, az alábbiak szerint.

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

A fenti módosított függvényben csak akkor ír rá, ha a felhasználó engedélyt adott a vágólapra írásra. Ellenkező esetben a függvény hibát jelez.

NPM-csomag használata a vágólapra másoláshoz a React alkalmazásban

Ha nem szeretné közvetlenül használni a vágólap API-t, vannak ilyenek több NPM csomag használhatod helyette. React alkalmazásokhoz használhatja a reagál-másolás-vágólapra csomag. Nagyon népszerű, heti több mint 1 millió letöltéssel, és könnyen használható.

Telepítse a React alkalmazásba a következő parancs futtatásával a terminálban:

npm install react-copy-to-clipboard

A telepítés után importálja a Másolja a vágólapra összetevőtől reagál-másolás-vágólapra ba,-be CopyButton összetevő.

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

A Másolja a vágólapra komponens elfogadja a másolni kívánt szöveget kellékként. Elfogad egy gyermekkomponenst is, amelyre kattintva elindítja a másolási műveletet.

Például az alábbi kóddal másolhat a vágólapra egy gombbal:

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

Vegye figyelembe a kezelő funkciót, onCopy. Két érvet fogad el, szöveg és eredmény ahol a szöveg a másolt szöveg, az eredmény pedig egy logikai érték, amely jelzi, hogy a másolási művelet sikeres volt-e vagy sem.

Miért használjunk vágólapra másolás funkciót?

Megtanulta, hogyan használhatja a vágólap API-t és a react-copy-to-clipboard csomagot szöveg másolására a vágólapra egy React alkalmazásban. Míg az alkalmazás felhasználói egyszerűen kiválaszthatják a szöveget, és használhatják a böngésző másolási funkcióját, a szöveg másolásához kattintással egyszerűbb és jobb a felhasználói élmény.