# @svelte-bin/clipboard

> Svelte action & utilities for copying text and image to clipboard

Latest version **0.1.4** (published 2023-11-13) · 0 weekly downloads

## Install

```sh
npm install @svelte-bin/clipboard
pnpm add @svelte-bin/clipboard
yarn add @svelte-bin/clipboard
bun add @svelte-bin/clipboard
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.4 |
| Published | 2023-11-13 |
| First published | 2023-11-09 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 9.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | binsarjr |
| Keywords | svelte, action, clipboard, copy, text, imageURL, imageBlob |

## Links

- npm: https://www.npmjs.com/package/@svelte-bin/clipboard
- npm.io page: https://npm.io/package/@svelte-bin/clipboard

## Alternatives

- [base64url](https://npm.io/package/base64url.md) — 6.1M weekly downloads
- [get-installed-path](https://npm.io/package/get-installed-path.md) — 502.9K weekly downloads
- [@uppy/url](https://npm.io/package/@uppy/url.md) — 185.8K weekly downloads
- [@d3fc/d3fc-shape](https://npm.io/package/@d3fc/d3fc-shape.md) — 16.2K weekly downloads
- [localizer](https://npm.io/package/localizer.md) — 226 weekly downloads

## Recent versions

- 0.1.4 (latest) — 2023-11-13
- 0.1.3 — 2023-11-10
- 0.1.2 — 2023-11-10
- 0.1.1 — 2023-11-10
- 0.0.1 — 2023-11-09

## README

# @svelte-bin/clipboard

Svelte action & utilities for copying text and image to clipboard

## Installation

```bash
npm i @svelte-bin/clipboard
```

## Usage

<details>
    <summary>Text Passed</summary>

```svelte
<script>
	import { clipboard } from '@svelte-bin/clipboard';
	let textToCopy = 'Hello World';

	let copied = false;
	const onCopy = () => {
		copied = true;
		setTimeout(() => {
			copied = false;
		}, 1000);
	};
</script>

<button type="button" use:clipboard={textToCopy} on:copied={onCopy}
	>{copied ? 'copied' : 'click me'}</button
>
```

</details>

<details>
    <summary>Image Passed (Blob)</summary>

https://web.dev/articles/async-clipboard#writetext

```svelte
<script>
    import {clipboard} from '@svelte-bin/clipboard'
    let imageToCopy = () => {
        const imgURL = '/images/generic/file.png';
        const data = await fetch(imgURL);
        const blob = await data.blob();

        return blob
    }

    let copied = false
    const onCopy = () => {
        copied = true
        setTimeout(() => {
            copied = false
        }, 1000)
    }
</script>

<button type="button" use:clipboard={imageToCopy} on:copied={onCopy}
	>{copied ? 'copied' : 'click me'}</button
>
```

</details>

<details>
    <summary>Image Passed (URL)</summary>

https://web.dev/articles/async-clipboard#writetext

```svelte
<script>
	import { clipboard } from '@svelte-bin/clipboard';

	let copied = false;
	const onCopy = () => {
		copied = true;
		setTimeout(() => {
			copied = false;
		}, 1000);
	};
</script>

<button
	type="button"
	use:clipboard={{
		imageURL: '/images/generic/file.png'
	}}
	on:copied={onCopy}>{copied ? 'copied' : 'click me'}</button
>
```

</details>

<details>
    <summary>text+Image Passed (URL)</summary>

https://web.dev/articles/async-clipboard#writetext

```svelte
<script>
	import { clipboard } from '@svelte-bin/clipboard';

	let copied = false;
	const onCopy = () => {
		copied = true;
		setTimeout(() => {
			copied = false;
		}, 1000);
	};
</script>

<button
	type="button"
	use:clipboard={{
		imageURL: '/images/generic/file.png',
		text: 'Hello World'
	}}
	on:copied={onCopy}>{copied ? 'copied' : 'click me'}</button
>
```

</details>

## Params

| Param                  | Description                                  |
| ---------------------- | -------------------------------------------- |
| `string\|Blob\|object` | There are 3 types parameter that can be used |

| Param  | Description                                                                               |
| ------ | ----------------------------------------------------------------------------------------- |
| string | The text (or function that returns text) that will be copied when the action is triggered |

| Param | Description                                                                                           |
| ----- | ----------------------------------------------------------------------------------------------------- |
| blob  | The image blob (or function that returns image blob) that will be copied when the action is triggered |

| Param (Object) | Description                                                    |
| -------------- | -------------------------------------------------------------- |
| text           | The text that will be copied when the action is triggered      |
| imageURL       | The image url that will be copied when the action is triggered |

## Events

The clipboard action dispatches custom events. Each custom event takes a callback function just like other events.

```ts
'on:copying': (event: CustomEvent) => void;
'on:copied': (event: CustomEvent<string | ClipboardItem>) => void;
'on:clipboard-error': (event: CustomEvent<any>) => void;

// just for check clipboard status
'on:clipboard-granted': (event: CustomEvent) => void;
'on:clipboard-danied': (event: CustomEvent) => void;
'on:clipboard-prompt': (event: CustomEvent) => void;
```

## Definition

```ts
interface ParameterObject {
	imageURL?: string;
	text?: string;
}

type AtLeastOne<T, U = { [K in keyof T]: Pick<T, K> }> = Partial<T> & U[keyof U];

type ParameterValue = string | ClipboardItem;

export type Parameter =
	| ParameterValue
	| Promise<ParameterValue>
	| (() => ParameterValue | Promise<ParameterValue>)
	| AtLeastOne<ParameterObject>;

interface Attributes {
	'on:copying': (event: CustomEvent) => void;
	'on:copied': (event: CustomEvent<string | ClipboardItem>) => void;
	'on:clipboard-error': (event: CustomEvent<any>) => void;

	// just for check clipboard status
	'on:clipboard-granted': (event: CustomEvent) => void;
	'on:clipboard-danied': (event: CustomEvent) => void;
	'on:clipboard-prompt': (event: CustomEvent) => void;
}

export type clipboardAction = Action<HTMLElement, Parameter, Attributes>;
```

---
_Source: https://npm.io/package/@svelte-bin/clipboard · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._