Como adicionar o recurso Copiar para área de transferência ao seu aplicativo React

Copiar informações manualmente, sejam trechos de código, links de URL ou fragmentos de texto, pode ser demorado e sujeito a erros, especialmente em dispositivos móveis onde a tela é pequena. Adicionar uma funcionalidade de “copiar para a área de transferência” não apenas economiza tempo, mas também reduz o potencial de erros e erros de digitação.

Configurando a funcionalidade de copiar para a área de transferência

Em um aplicativo React, crie um novo componente chamado Botão Copiar. Este componente aceita texto que deve ser copiado para a área de transferência.

Se você não tem um projeto React para trabalhar, use o utilitário create react app para armar um.

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

Quando clicado, o botão deve chamar uma função chamada copiar para área de transferência que copia o texto para a área de transferência.

Para implementar a funcionalidade de cópia, você pode usar a API da área de transferência diretamente ou usar um pacote NPM.

Este guia mostrará como usar ambos.

Usando a API Clipboard para copiar texto para uma área de transferência no React

O API da área de transferência fornece uma maneira de interagir com comandos da área de transferência, como copiar, recortar e colar.

Para acessá-lo, você precisa usar o navegador.clipboard objeto disponível na maioria dos navegadores modernos. Possui vários métodos que permitem escrever ou ler o conteúdo da área de transferência.

Para escrever na área de transferência, use o escreverTexto método.

Vamos ver como implementar isso no copiar para área de transferência função do Botão 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);
 }
 };

O escreverTexto O método aceita o texto que será copiado para a área de transferência. Este método é assíncrono, então você deve usar a palavra-chave await antes de prosseguir.

Se o texto for copiado para a área de transferência, exiba uma mensagem de sucesso, caso contrário, exiba a mensagem de erro como um alerta.

Verificando as permissões do navegador

Como boa prática, é importante garantir que o usuário concedeu permissão ao navegador para acessar a área de transferência. Você pode verificar se o usuário concedeu gravação na área de transferência permissão usando o navegador.permissions API da Web antes de copiar para a área de transferência, conforme mostrado abaixo.

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

Na função modificada acima, somente quando o usuário tiver concedido permissão para gravar na área de transferência é que ele estará gravando nela. Caso contrário, a função gera um erro.

Usando um pacote NPM para copiar para a área de transferência no React

Se você não quiser usar a API da área de transferência diretamente, existem vários pacotes NPM você pode usar em seu lugar. Para aplicativos react, você pode usar o reagir-copiar para a área de transferência pacote. É bastante popular, com mais de 1 milhão de downloads semanais e também é fácil de usar.

Instale-o em seu aplicativo React executando o seguinte comando no terminal:

npm install react-copy-to-clipboard

Depois de instalado, importe o Copiar para área de transferência componente de reagir-copiar para a área de transferência no Botão Copiar componente.

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

O Copiar para área de transferência O componente aceita o texto que você deseja copiar como adereço. Ele também aceita um componente filho que, quando clicado, aciona a ação de cópia.

Por exemplo, use o código abaixo para copiar para a área de transferência com um botão:

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

Observe a função do manipulador, onCopy. Aceita dois argumentos, texto e resultado onde text é o texto copiado e o resultado é um booleano que indica se a ação de cópia foi bem-sucedida ou não.

Por que usar uma função Copiar para a área de transferência?

Você aprendeu como usar a API da área de transferência e o pacote react-copy-to-clipboard para copiar texto para a área de transferência em um aplicativo React. Embora os usuários do seu aplicativo possam simplesmente selecionar o texto e usar a funcionalidade de cópia do seu navegador, clicar para copiar o texto é mais simples e melhor para a experiência do usuário.