Cómo agregar la función Copiar al portapapeles a su aplicación React

Copiar información manualmente, ya sean fragmentos de código, enlaces URL o fragmentos de texto, puede llevar mucho tiempo y ser propenso a errores, especialmente en dispositivos móviles donde la pantalla es pequeña. Agregar una funcionalidad de "copiar al portapapeles" no solo ahorra tiempo sino que también reduce la posibilidad de errores tipográficos.

Configuración de la función Copiar al portapapeles

En una aplicación React, cree un nuevo componente llamado Botón Copiar. Este componente acepta texto que debe copiar al portapapeles.

Si no tienes un proyecto de React en el que trabajar, use la utilidad crear aplicación de reacción para armar uno.

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

Cuando se hace clic, el botón debe llamar a una función llamada copiar al portapapeles que copia el texto al portapapeles.

Para implementar la funcionalidad de copia, puede usar la API del portapapeles directamente o usar un paquete NPM.

Esta guía le mostrará cómo utilizar ambos.

Usando la API del Portapapeles para copiar texto a un portapapeles en React

El API del portapapeles proporciona una forma de interactuar con los comandos del portapapeles, como copiar, cortar y pegar.

Para acceder a él es necesario utilizar el navegador.portapapeles objeto disponible en la mayoría de los navegadores modernos. Tiene varios métodos que te permiten escribir o leer el contenido del portapapeles.

Para escribir en el portapapeles, utilice el escribir texto método.

Veamos cómo implementar esto en el copiar al portapapeles función de la Botón Copiar 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);
 }
 };

El escribir texto El método acepta el texto que copiará al portapapeles. Este método es asincrónico, por lo que debes usar la palabra clave await antes de continuar.

Si el texto se copia al portapapeles, muestra un mensaje de éxito; de lo contrario, muestra el mensaje de error como una alerta.

Comprobación de permisos del navegador

Como buena práctica, es importante asegurarse de que el usuario haya otorgado permiso al navegador para acceder al portapapeles. Puedes comprobar si el usuario ha concedido escritura-portapapeles permiso usando el navegador.permisos API web antes de copiar al portapapeles como se muestra a continuación.

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

En la función modificada anterior, solo cuando el usuario ha otorgado permiso para escribir en el portapapeles se escribe en él. De lo contrario, la función arroja un error.

Usando un paquete NPM para copiar al portapapeles en React

Si no desea utilizar la API del portapapeles directamente, existen múltiples paquetes NPM puedes usar en su lugar. Para aplicaciones de reacción, puede utilizar el reaccionar-copiar-al-portapapeles paquete. Es bastante popular con más de 1 millón de descargas semanales y también es fácil de usar.

Instálelo en su aplicación React ejecutando el siguiente comando en la terminal:

npm install react-copy-to-clipboard

Una vez instalado, importe el Copiar al portapapeles componente de reaccionar-copiar-al-portapapeles en el Botón Copiar componente.

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

El Copiar al portapapeles El componente acepta el texto que desea copiar como accesorio. También acepta un componente secundario que, cuando se hace clic en él, activa la acción de copiar.

Por ejemplo, use el siguiente código para copiar al portapapeles con un botón:

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

Tenga en cuenta la función del controlador, en Copiar. Acepta dos argumentos, texto y resultado donde texto es el texto copiado y el resultado es un booleano que indica si la acción de copia fue exitosa o no.

¿Por qué utilizar la función Copiar al portapapeles?

Ha aprendido a utilizar la API del portapapeles y el paquete reaccionar-copiar-al-clipboard para copiar texto al portapapeles en una aplicación React. Si bien los usuarios de su aplicación pueden simplemente seleccionar el texto y usar la función de copia de su navegador, hacer clic para copiar el texto es más sencillo y mejor para la experiencia del usuario.