CopyButton

tcmts.share.CopyButton · #rofqsxml · term · runs in the browser

uses useState

A button that copies some text (a name, a command), saying so (or that the browser wouldn't); pointing at it shows what it copies.

import { copyText, toasts } from "#codebase/tcmts/share";
import { useState } from "react";
import { Button, Tooltip, TooltipTrigger } from "react-aria-components";

export function CopyButton({
  text,
  label,
  primary,
}: {
  text: string;
  label: string;
  primary?: boolean;
}) {
  const [done, setDone] = useState(false);
  return (
    <TooltipTrigger delay={500}>
      <Button
        className={`btn${primary ? " primary" : ""}`}
        onPress={() => {
          copyText(text).then(
            () => {
              setDone(true);
              setTimeout(() => setDone(false), 1500);
            },
            () =>
              toasts.add(
                {
                  title: "Couldn't copy",
                  description: "The browser didn't allow it: select the text instead.",
                  tone: "bad",
                },
                { timeout: 6000 },
              ),
          );
        }}
      >
        {done ? "Copied ✓" : label}
      </Button>
      <Tooltip className="tooltip" offset={6}>
        {text}
      </Tooltip>
    </TooltipTrigger>
  );
}

uses

used by