Se você está lendo esta postagem do blog, é muito provável que você tenha clonado um repositório git do GitHub. Um dos pequenos, mas poderosos recursos que o GitHub adicionou ao seu site permite que os usuários cliquem em um botão para copiar o URL do Git para sua área de transferência para que você possa colá-lo facilmente em seu terminal para clonar o repositório em sua máquina local.
p> Isso é muito mais fácil do que selecionar toda a linha de texto e clicar em Control + C ou Command + C para copiá-la. Também evita que você perca qualquer caractere do URL ao selecioná-lo.
Agora, digamos que você esteja criando um novo site de blog para si mesmo e queira torná-lo o mais fácil possível para os leitores compartilhe uma postagem com alguém. Alguns sites de mídia social oferecem maneiras de usar um link e iniciar automaticamente uma nova postagem em seu site, mas nem todos os aplicativos suportam esse tipo de funcionalidade.
E se você quiser copiar um URL e enviá-lo para alguém mais zoom ou iMessage? Melhoraria muito a experiência do usuário se fornecêssemos aos usuários um botão para copiar o texto. Também seria especialmente útil para usuários de celular.
Nesta postagem, vou mostrar como fazer isso criando um componente React reutilizável que aceitará o texto como um valor de propriedade e, ao clicar, copia o texto para a área de transferência do usuário.
O que é a API JavaScript Clipboard?
Felizmente, na era do desenvolvimento moderno da web, temos muitos recursos úteis da web APIs que facilitam tarefas como copiar e colar texto no navegador. A API atual de fato para a interação da área de transferência é a API da área de transferência , que fornece algumas funções simples para chamar para copiar texto para a área de transferência do usuário e ler itens dela.
Infelizmente, nem todos os navegadores da web suportam esta API, e você provavelmente pode adivinhar qual. É o Internet Explorer. Há uma função legada que você pode usar como backup se ainda tiver que oferecer suporte ao IE, usando document.execCommand (‘copiar’).
Aqui está um exemplo de uma função que aceita texto como um argumento e copia para a área de transferência do usuário:
exportar função assíncrona copyTextToClipboard (texto) {if (‘área de transferência’no navegador) {return await navigator.clipboard.writeText (text); } else {return document.execCommand (‘copiar’, verdadeiro, texto); }}
Agora, vamos examinar isso.
Primeiro, temos uma função assíncrona chamada copyTextToClipboard, que tem um único argumento de texto. Ele verifica se a área de transferência de propriedades existe no objeto navegador. Esta é uma maneira fácil de verificar se o navegador atual é compatível com a Clipboard API.
A seguir, se o navegador for compatível com a Clipboard API, esperamos que a promessa navigator.clipboard.writeText (text) seja resolvida e retorne-o.
Caso contrário, chamamos a função Document.execCommand com os argumentos’copiar’, verdadeiro, texto. Você pode ler sobre os argumentos deste comando no MDN Docs .
Quando você executa este comando em um navegador, ele copia qualquer texto passado como parâmetro para a área de transferência do usuário, para que, quando o usuário colar o texto, ele apareça.
Agora que temos uma função de trabalho simples para isso, vamos implementá-la em um componente React flexível.
Usando a Clipboard API no React
Vamos começar configurando um componente React simples que representa visualmente o que estamos tentando alcançar:
function ClipboardCopy ({copyText}) {const [isCopied, setIsCopied]=useState (false);//TODO: Implementar o retorno da funcionalidade copiar para a área de transferência (
); }
Aqui, configurei o componente ClipboardCopy, que aceita a propriedade copyText. Este será o texto que queremos que nossos usuários copiem. Ele renderizará um elemento somente leitura que exibe nossa string copyText e um botão que usaremos para executar nossa função de cópia.
Eu também adicionei o valor de estado isCopied para manter o controle de se o texto foi copiado para a área de transferência e alterar o texto mostrado em nosso botão de cópia.
Agora, precisamos criar uma função de manipulador onClick para nosso botão que chamará de forma assíncrona nossa função copyToClipboard e passará copyText, como um argumento.
Com base no resultado da função, alteraremos o estado de isCopied para true ou, se ocorrer um erro, imprimiremos no console. Se o comando for bem-sucedido, na próxima vez que o usuário colar texto em seu dispositivo, o valor de copyText será o resultado.
function ClipboardCopy ({copyText}) {const [isCopied, setIsCopied]=useState (false);//Esta é a função que escrevemos anteriormente função assíncrona copyTextToClipboard (text) {if (‘clipboard’no navegador) {return await navigator.clipboard.writeText (text); } else {return document.execCommand (‘copiar’, verdadeiro, texto); }}//função de manipulador onClick para o botão de cópia const handleCopyClick=()=> {//Chama de forma assíncrona copyTextToClipboard copyTextToClipboard (copyText).then (()=> {//Se for bem-sucedido, atualize o valor do estado isCopied setIsCopied (true) ; setTimeout (()=> {setIsCopied (false);}, 1500);}).catch ((err)=> {console.log (err);}); } return (
); }
O que adicionei aqui é uma nova função, handleCopyClick, que serve como o manipulador de eventos onClick para nosso elemento de botão.
Quando o usuário clica no botão, a função do manipulador de eventos é executada, e nossa função assíncrona copyTextToClipboard é executada.
Depois que a função é resolvida, ela define o valor do estado isCopied como true ou, se ocorrer um erro, imprime o erro.
I’Também adicionamos uma função setTimeout que redefine o valor do estado copiado de volta para falso após 1,5 segundos. Isso nos permite dar ao usuário algum feedback de interação porque copiar texto para uma área de transferência é uma “tarefa em segundo plano” que não fornece nenhum feedback inerente.
Agora, podemos usar este componente em qualquer lugar em nosso aplicativo React , desta forma:
function App () {return (
); }
Finalmente, quando você executa o aplicativo, é o que o usuário deve ver:
Você pode melhorar esta solução fornecendo um feedback melhor no caso de um erro ao chamar copyTextToClipboard. Se você tiver um componente de erro em seu projeto, poderá chamar uma função ou alterar o estado para exibir um erro ao usuário, em vez de imprimir um texto no console que o usuário provavelmente nunca verá.
Conclusão
Agora que cobrimos a API JavaScript Clipboard, você pode ver como é fácil implementá-la em qualquer caso de uso. Isso também melhora muito a experiência do usuário em seu site. E, é claro, tornar simples para os usuários compartilharem seu conteúdo também pode aumentar a exposição do seu site se você estiver tentando ganhar uma audiência para o seu conteúdo. Depois de ler isso, espero que você possa colher esses benefícios para si mesmo.
