npm package: @svelte-bin/clipboard
Description: Svelte action & utilities for copying text and image to clipboard
Latest version: 0.1.4

# @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>;
```