Skip to content

Instantly share code, notes, and snippets.

@SandroMaglione

SandroMaglione/copy.tsx

Created May 17, 2025 03:14
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save SandroMaglione/3ef1f83b212af1a15c4221d22b2ac3e3 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save SandroMaglione/3ef1f83b212af1a15c4221d22b2ac3e3 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. SandroMaglione created this gist May 17, 2025.
    36 changes: 36 additions & 0 deletions copy.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,36 @@
    import { useActor } from "@xstate/react";
    import { setup } from "xstate";

    const copyMachine = setup({
    types: {
    events: {} as { type: "copy"; text: string },
    },
    }).createMachine({
    initial: "Idle",
    states: {
    Idle: {
    on: {
    copy: {
    target: "Copied",
    actions: ({ event }) => {
    window.navigator.clipboard.writeText(event.text);
    },
    },
    },
    },
    Copied: {
    after: {
    2000: "Idle",
    },
    },
    },
    });

    export default function CopyLink() {
    const [snapshot, send] = useActor(copyMachine);
    return (
    <button onClick={() => send({ type: "copy", text: "some text" })}>
    {snapshot.matches("Copied") ? "Copied!" : "Copy link"}
    </button>
    );
    }