internals

Use copy To Clipboard

Composable use-copy-to-clipboard() — VueUse-порт одноимённого хука ReUI.

Загрузка превью…

src/composables/use-copy-to-clipboard.ts

/**
 * Порт `useCopyToClipboard` (registry-reui/bases/radix/hooks/use-copy-to-clipboard.ts, MIT)
 * поверх `useClipboard` из `@vueuse/core` (см. docs/PORTING.md, раздел 2:
 * "React-хуки общего назначения → VueUse").
 *
 * Сигнатура возврата сохранена максимально близко к оригиналу:
 * `{ isCopied, copyToClipboard }`. `isCopied` — реактивный `ComputedRef<boolean>`
 * (аналог `useState` в оригинале), `copyToClipboard` — функция с той же
 * сигнатурой `(value: string) => void`.
 *
 * `timeout`/`onCopy` перенесены буквально: `timeout` → `copiedDuring` у
 * `useClipboard` (сброс `isCopied` через заданное время), `onCopy`
 * вызывается после успешного копирования, как и в оригинале.
 */
import { useClipboard } from "@vueuse/core"

export interface UseCopyToClipboardOptions {
  timeout?: number
  onCopy?: () => void
}

export function useCopyToClipboard({ timeout = 2000, onCopy }: UseCopyToClipboardOptions = {}) {
  const { copy, copied, isSupported } = useClipboard({ copiedDuring: timeout })

  const copyToClipboard = (value: string) => {
    if (!isSupported.value) {
      return
    }

    if (!value) return

    copy(value).then(() => {
      onCopy?.()
    }, console.error)
  }

  return { isCopied: copied, copyToClipboard }
}

Установка

npx shadcn-vue@latest add https://revueui.rootapi.dev/r/use-copy-to-clipboard.json

npm-зависимости

  • @vueuse/core

Источник: порт из ReUI (Keenthemes, MIT)