useClipboard

const { onCopy, value, setValue, hasCopied } = useClipboard()

return (
  <>
    <HStack gap="md">
      <Input
        placeholder="text to be copied..."
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      <Button onClick={onCopy}>{hasCopied ? "Copied!" : "Copy"}</Button>
    </HStack>

    <Editable placeholder="Paste here" mt="md">
      <EditablePreview width="full" />
      <EditableInput />
    </Editable>
  </>
)

const { onCopy, value, setValue, hasCopied } = useClipboard("initial value")

return (
  <>
    <HStack gap="md">
      <Input
        placeholder="text to be copied..."
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      <Button onClick={onCopy}>{hasCopied ? "Copied!" : "Copy"}</Button>
    </HStack>

    <Editable placeholder="Paste here" mt="md">
      <EditablePreview width="full" />
      <EditableInput />
    </Editable>
  </>
)

const { onCopy, value, setValue, hasCopied } = useClipboard("", 5000)

return (
  <>
    <HStack gap="md">
      <Input
        placeholder="text to be copied..."
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      <Button onClick={onCopy}>{hasCopied ? "Copied!" : "Copy"}</Button>
    </HStack>

    <Editable placeholder="Paste here" mt="md">
      <EditablePreview width="full" />
      <EditableInput />
    </Editable>
  </>
)

const { onCopy, hasCopied } = useClipboard()

const value = "Goku"

return (
  <HStack gap="md">
    <Input value={value} isReadOnly />
    <Button onClick={() => onCopy(value)}>
      {hasCopied ? "Copied!" : "Copy"}
    </Button>
  </HStack>
)