<script setup>
import Source from '../../.vitepress/theme/components/Source.vue'
</script>

# useClipboard

Reactive Clipboard API. Provides the ability to respond to clipboard commands.

## Usage

```vue
<script lang="ts" setup>

const {
  text, // Reactive current clipboard value (disabled by default)
  copied,
  copy,
  read
} = useClipboard({ sync: true });

</script>

<template>
  <Page>
    <StackLayout>
      <FlexboxLayout>
        <Label v-if="!copied">Reactive clipboard</Label>
        <Label v-else> Copied {{ text }}! </Label>
      </FlexboxLayout>
      <Button @tap="copy('Example copy text')" text="Copy"></Button>
    </StackLayout>
  </Page>
</template>
```


::: warning
By default clipboard synchronization is disabled, which means that if the user copies something within your application this function will not detect it. To enable synchronization and for the reactive variable `text` to be synchronized with the clipboard, you must enable `{ sync: true }`.
:::

## Source
<Source source="useClipboard" demo="ClipboardView.vue"/>

## Type declaration
```ts
import { Ref } from "nativescript-vue";

/**
 * Reactive Clipboard API.
 */
export declare function useClipboard(options?: {
    sync?: boolean;
}): {
    text: Ref<string>;
    copied: Ref<boolean>;
    copy: (text: string) => void;
    read: () => string;
};
```

## Core dependency
[@nativescript-use/nativescript-clipboard](https://github.com/NativeScript-Use/NativeScript-Use/tree/main/packages/nativescript-clipboard)