Crie um Botão de Copiar com Feedback no React (Simples e Útil)

Copiar texto para a área de transferência é algo comum em diversas interfaces: seja uma chave de API, um link de compartilhamento ou um código de cupom.

Neste artigo, você vai aprender a criar um componente React simples e funcional que exibe um texto copiável com um botão de copiar que dá feedback visual ao usuário — tudo com React, TypeScript e CSS Modules, sem bibliotecas externas.

Por que um botão de copiar?

Esse tipo de componente melhora a experiência do usuário e reduz erros de cópia. Você pode usá-lo em:

  • Dashboards com tokens de acesso

  • Páginas de convites ou compartilhamentos

  • Ferramentas internas com dados técnicos

  • Qualquer lugar que precise copiar algo rápido

O que o componente faz

  • Exibe um campo de texto com valor fixo

  • Um botão "Copiar" ao lado

  • Ao clicar, o conteúdo é copiado com navigator.clipboard

  • O botão muda para "Copiado" por 500ms e depois volta

Simples, direto e muito útil.

O código do componente

import { useState } from 'react';
import CopyContentStyles from './CopyContent.module.css';

interface ICopyContentProps {
  content: string;
}

export const CopyContent = ({ content }: ICopyContentProps) => {
  const [copied, setCopied] = useState(false);

  function handleCopy() {
    setCopied(true);
    window.navigator.clipboard.writeText(content);
    setTimeout(() => setCopied(false), 500);
  }

  return (
    <div className={CopyContentStyles.CopyContentContainer}>
      <input
        autoFocus
        value={content}
        onFocus={e => e.target.select()}
        className={CopyContentStyles.CopyContentInput}
      />

      <button className={CopyContentStyles.CopyContentButton} onClick={handleCopy}>
        {copied ? 'Copiado' : 'Copiar'}
      </button>
    </div>
  );
};

Estilos com CSS Modules

/* CopyContent.module.css */
.CopyContentContainer {
  display: flex;
  gap: 8px;
  align-items: center;
}

.CopyContentInput {
  padding: 8px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.CopyContentButton {
  padding: 8px 12px;
  background-color: #333;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

Como usar

Basta importar e usar o componente passando o valor que será copiado:

<CopyContent content="ABCD-1234-EFGH" />

Resultado

Você terá um campo de texto estilizado com um botão funcional ao lado. Sempre que o usuário clicar no botão, o conteúdo será copiado e um feedback visual será mostrado.

Próximos passos

Quer incrementar o componente?

  • Mostrar um toast animado com framer-motion

  • Usar ícones com react-icons ou lucide-react

  • Torná-lo acessível com aria-labels

Gostou desse mini componente?
Compartilha, comenta ou dá um follow — posso transformar isso numa série com outros componentes simples e úteis em React!
Local: Brasil

Comentários

Postar um comentário