Copy to Clipboard component

[ATLAS2002]

Minimal component structure to copy data of an element with a button trigger.

Demo structure:

<Wrapper onCopy={handleCopy}>
    <Trigger><TriggerIcon /></Trigger>
    <ElementBody />
</Wrapper>

handleCopy is an optional value in this case, you can do modifications to the content before copying it to the clipboard.

function handleCopy(content: string): string {
    content.replace(" ", "\n");
    return content;
}

[moorage]

There is currently this https://github.com/shadcn-ui/ui/blob/main/apps/www/components/copy-button.tsx

[iloveitaly]

Here's what is working for me:

import { useState } from "react"
import TurndownService from "turndown"

import { Copy } from "lucide-react"

import { Button } from "@/components/ui/button"

interface CopyButtonProps {
  text?: string
  html?: string
  htmlRef?: React.RefObject<HTMLElement | null>
  className?: string
}

export function CopyButton({
  text,
  html,
  htmlRef,
  className,
}: CopyButtonProps) {
  const [copied, setCopied] = useState(false)

  const copyToClipboard = async () => {
    try {
      if (!text && !html && !htmlRef?.current) {
        console.error("No text, HTML, or HTML reference to copy")
        return
      }

      const htmlContent = html || htmlRef?.current?.innerHTML || ""
      let textContent = text

      if (!textContent && htmlContent) {
        var turndownService = new TurndownService()
        textContent = turndownService.turndown(htmlContent)
      } else {
        textContent = ""
      }

      if (htmlContent) {
        const clipboardData = new ClipboardItem({
          "text/plain": new Blob([textContent], { type: "text/plain" }),
          "text/html": new Blob([htmlContent], { type: "text/html" }),
        })
        await navigator.clipboard.write([clipboardData])
      } else {
        await navigator.clipboard.writeText(textContent)
      }

      setCopied(true)
      setTimeout(() => setCopied(false), 2000)
    } catch (err) {
      console.error("Failed to copy text:", err)
    }
  }

  return (
    <Button
      variant="outline"
      size="sm"
      className={className}
      onClick={copyToClipboard}
    >
      <Copy className="mr-2 h-4 w-4" />
      {copied ? "Copied!" : "Copy to Clipboard"}
    </Button>
  )
}

[joshpachner]

This part needs to change

let textContent = text if (!textContent && htmlContent) { var turndownService = new TurndownService() textContent = turndownService.turndown(htmlContent) } else { textContent = "" }

to

let textContent = text ?? ''; if (textContent != '' && htmlContent) { const turndownService = new TurndownService(); textContent = turndownService.turndown(htmlContent); }

Because if htmlContent isn't passed in then the textContent is just being set to empty each time.

Other than that. Code works great. Thank you!

EDIT Notes: omg its so hard to put code blocks in here

[hammadshykh]

Ohh Nice Component! 👏

[iloveitaly]

I pulled this component into a separate repo with registry support so it's really easy to add to a project

https://github.com/iloveitaly/shadcn-copy-button