CopyNpmCommandButton() — ui Function Reference

Architecture documentation for the CopyNpmCommandButton() function in copy-button.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives calls 1

Entity Profile

ComponentRegistry→ UIPrimitives→ CopyNpmCommandButton() — ui Function Reference

Dependency Diagram

graph TD
  4858f616_0bda_77ab_22ed_3eec46893e73["CopyNpmCommandButton()"]
  40c3b834_cac9_e0e3_2ccf_6a31f24f5b75["copy-button.tsx"]
  4858f616_0bda_77ab_22ed_3eec46893e73 -->|defined in| 40c3b834_cac9_e0e3_2ccf_6a31f24f5b75
  950171c6_2456_bafd_9876_2b64c35e4630["copyToClipboardWithMeta()"]
  4858f616_0bda_77ab_22ed_3eec46893e73 -->|calls| 950171c6_2456_bafd_9876_2b64c35e4630
  style 4858f616_0bda_77ab_22ed_3eec46893e73 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/components/copy-button.tsx lines 137–207

export function CopyNpmCommandButton({
  commands,
  className,
  ...props
}: CopyNpmCommandButtonProps) {
  const [hasCopied, setHasCopied] = React.useState(false)

  React.useEffect(() => {
    setTimeout(() => {
      setHasCopied(false)
    }, 2000)
  }, [hasCopied])

  const copyCommand = React.useCallback(
    (value: string, pm: "npm" | "pnpm" | "yarn" | "bun") => {
      copyToClipboardWithMeta(value, {
        name: "copy_npm_command",
        properties: {
          command: value,
          pm,
        },
      })
      setHasCopied(true)
    },
    []
  )

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          size="icon"
          variant="ghost"
          className={cn(
            "relative z-10 h-6 w-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50",
            className
          )}
        >
          {hasCopied ? (
            <CheckIcon className="h-3 w-3" />
          ) : (
            <ClipboardIcon className="h-3 w-3" />
          )}
          <span className="sr-only">Copy</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem
          onClick={() => copyCommand(commands.__npmCommand__, "npm")}
        >
          npm
        </DropdownMenuItem>
        <DropdownMenuItem
          onClick={() => copyCommand(commands.__yarnCommand__, "yarn")}
        >
          yarn
        </DropdownMenuItem>
        <DropdownMenuItem
          onClick={() => copyCommand(commands.__pnpmCommand__, "pnpm")}
        >
          pnpm
        </DropdownMenuItem>
        <DropdownMenuItem
          onClick={() => copyCommand(commands.__bunCommand__, "bun")}
        >
          bun
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}