Copy button

PreviousNext

Simple copy button that can be modified according to your needs!

Docs
react-marketcomponent

Preview

Loading preview…
copy-button.tsx
"use client";

import { useState } from "react";
import { Check, Copy } from "lucide-react";
import { Button } from "@/components/ui/button";
import { toast } from "sonner";

interface Props {
  name: string;
}

export function CopyButton(props: Props) {
  const [copied, setCopied] = useState(false);

  const handleCopy = () => {
    void navigator.clipboard.writeText("anything");
    toast.success("Copied to clipboard");
    setCopied(true);
    setTimeout(() => setCopied(false), 3000);
  };

  return (
    <Button size={"icon"} onClick={handleCopy} variant={"ghost"} name="Copy">
      {copied ? <Check className="h-5 w-5" /> : <Copy className="h-5 w-5" />}
    </Button>
  );
}

Installation

npx shadcn@latest add @react-market/copy-btn

Usage

import { CopyBtn } from "@/components/copy-btn"
<CopyBtn />