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.jsonnpm-зависимости
- @vueuse/core
Источник: порт из ReUI (Keenthemes, MIT)