A transferência manual de informações, como fragmentos de código, links de URL ou trechos de texto, pode ser um processo moroso e suscetível a erros, especialmente em dispositivos móveis com telas menores. A incorporação de um recurso de “copiar para a área de transferência” não só otimiza o tempo, mas também diminui a probabilidade de equívocos e erros de digitação.
Implementando a Funcionalidade de Copiar para a Área de Transferência
Em um projeto React, crie um novo componente denominado `CopyButton`. Este componente receberá como entrada o texto que será copiado para a área de transferência.
Caso não possua um projeto React, utilize o utilitário `create react app` para iniciar um novo.
function CopyButton({text}) {
const copyToClipboard = () => {
}
return (
<button onClick={copyToClipboard}>Copiar</button>
)
}export default CopyButton
Ao ser acionado, o botão deverá executar a função `copyToClipboard`, que tem como objetivo transferir o texto para a área de transferência.
Para realizar essa cópia, é possível utilizar diretamente a API da área de transferência ou recorrer a um pacote NPM.
Este guia demonstrará ambas as abordagens.
Utilizando a API Clipboard para Copiar Texto no React
A API Clipboard oferece um meio de interagir com comandos da área de transferência, como copiar, recortar e colar.
Para acessá-la, é preciso empregar o objeto `navigator.clipboard`, disponível na maioria dos navegadores atuais. Ele oferece diversos métodos que permitem manipular o conteúdo da área de transferência, seja para escrever ou ler.
Para gravar na área de transferência, utilize o método `writeText`.
Vejamos como implementar isso na função `copyToClipboard` do componente `CopyButton`.
const copyToClipboard = async (text) => {
try {
await navigator.clipboard.writeText(text);
alert('Texto copiado para a área de transferência:', text);
} catch (error) {
alert('Erro ao copiar para a área de transferência:', error);
}
};
O método `writeText` recebe o texto que será transferido para a área de transferência. Este método é assíncrono, portanto, é necessário utilizar a palavra-chave `await` antes de prosseguir.
Se a cópia for bem-sucedida, uma mensagem de êxito será exibida; caso contrário, será mostrado um alerta com a mensagem de erro.
Verificando as Permissões do Navegador
Como prática recomendada, é fundamental garantir que o usuário tenha concedido permissão ao navegador para acessar a área de transferência. É possível verificar se o usuário permitiu a gravação na área de transferência utilizando a API `navigator.permissions` antes de realizar a cópia, conforme demonstrado a seguir.
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('Texto copiado para a área de transferência!');
} else {
throw new Error("Não é possível acessar a área de transferência. Verifique as permissões do seu navegador.")
}
} catch (error) {
alert('Erro ao copiar para a área de transferência:', error);
}
};
Na função modificada acima, a gravação na área de transferência ocorre apenas se o usuário tiver concedido permissão para isso. Caso contrário, a função gera um erro.
Utilizando um Pacote NPM para Copiar no React
Se você preferir não usar diretamente a API da área de transferência, existem diversos pacotes NPM disponíveis. Para aplicativos React, você pode utilizar o pacote react-copy-to-clipboard. Ele é bastante popular, com mais de 1 milhão de downloads semanais e também é fácil de usar.
Para instalá-lo em seu projeto React, execute o seguinte comando no terminal:
npm install react-copy-to-clipboard
Após a instalação, importe o componente `CopyToClipboard` do `react-copy-to-clipboard` para o componente `CopyButton`.
import {CopyToClipboard} from 'react-copy-to-clipboard';
O componente `CopyToClipboard` recebe o texto que você deseja copiar como prop. Ele também recebe um componente filho que, ao ser acionado, dispara a ação de cópia.
Por exemplo, utilize o código abaixo para copiar para a área de transferência com um botão:
<CopyToClipboard text={text} onCopy={(text, result) => console.log(result)}>
<button>Copiar</button>
</CopyToClipboard>
Note a função do manipulador, `onCopy`. Ela recebe dois argumentos, `text` e `result`, onde `text` é o texto copiado e `result` é um booleano indicando se a ação de cópia foi bem-sucedida ou não.
Por que Utilizar a Função Copiar para a Área de Transferência?
Você aprendeu como utilizar a API da área de transferência e o pacote `react-copy-to-clipboard` para copiar texto em um aplicativo React. Embora os usuários do seu aplicativo possam simplesmente selecionar o texto e utilizar a funcionalidade de cópia do navegador, a opção de copiar com um clique torna a experiência do usuário mais simples e agradável.